我是一個 JS 菜鳥，除了簡單的 CSS 東西外，從未接觸過任何編碼。我在這里要做的是創建一個互動式圖形，您可以在其中單擊 SVG 的一部分，它會向您顯示一張圖片。我要讓影像在 SVG 本身的底部某處顯示。這是我使用的代碼：
<script>
function myFunction(idblue) {
var bluepic = "https://i.ibb.co/yfn8GwC/bluecity.jpg";
document.getElementById(idblue).src = bluepic;
}
我像這樣穿上onclick。<path>
<path id="bluecity" onclick="myFunction('idblue')" class="bc" d="000 000 000..."> </path>
為了在底部顯示圖片，我以前使用過這一行，但現在它不在我鏈接的 SVG 檔案中。
<img class="pic" id="idblue" x="10" y="200"> </img>
但是，當您單擊相應的部分時，圖片不會出現（到目前為止，我只設法顯示具有相似線條的文本）。這也是我正在擺弄的SVG 檔案。我如何使它作業？
uj5u.com熱心網友回復：
只需將腳本添加到站點的 html 中而不是 svg 中，它應該可以正常作業。
function myFunction(idblue) {
var bluepic = "https://i.ibb.co/yfn8GwC/bluecity.jpg";
document.getElementById(idblue).src = bluepic;
}<img id = "idblue">
<svg
viewBox="0 0 400 400"
version="1.1"
id="svg5"
inkscape:version="1.1.2 (b8e25be833, 2022-02-05)"
sodipodi:docname="colourfultest.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview7"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:document-units="mm"
showgrid="false"
inkscape:zoom="0.49798681"
inkscape:cx="307.23705"
inkscape:cy="562.26389"
inkscape:window-width="1300"
inkscape:window-height="745"
inkscape:window-x="-8"
inkscape:window-y="-8"
inkscape:window-maximized="1"
inkscape:current-layer="svg5" />
<defs
id="defs2" />
<style type="text/css">
.land {
stroke: white;
stroke-width: 1.5;
stroke-miterlimit: 4;
}
.circle {
opacity: 0;
fill-opacity: 1;
stroke: black;
stroke-width: 0.5;
stroke-opacity: 1;
}
path:hover {
opacity: 0.5;
}
</style>
<path id="bluecity" onclick="myFunction('idblue')" class="bc"
style="display:inline;fill:#008080;stroke-width:0.531307"
d="m 88.728086,215.13469 c -4.383275,-0.85084 -8.447765,-1.76804 -9.0322,-2.03822 -0.584438,-0.27018 -3.45349,-0.6237 -6.375673,-0.78561 -2.922182,-0.1619 -6.180121,-0.54227 -7.239868,-0.84526 -2.218883,-0.63439 -4.714515,-2.90179 -4.714515,-4.28336 0,-2.25724 3.359785,-9.6287 5.317104,-11.66588 1.116415,-1.16196 2.110166,-2.31789 2.208339,-2.56873 0.09817,-0.25084 1.194615,-1.09253 2.436543,-1.87041 1.241928,-0.77789 2.258052,-1.61225 2.258052,-1.85413 0,-0.24188 1.29462,-0.75036 2.876934,-1.12995 2.699123,-0.64751 2.898968,-0.8076 3.233385,-2.5902 0.622493,-3.31818 3.923255,-8.57808 5.383028,-8.57808 0.779145,0 2.92205,-1.0698 3.394831,-1.6948 0.152498,-0.20159 1.179237,-0.97863 2.281645,-1.72674 2.574552,-1.74714 5.27671,-1.79093 7.265191,-0.11773 1.982278,1.66798 7.247568,3.73676 12.773188,5.01871 2.4931,0.5784 5.41484,1.65014 6.49277,2.38164 1.07792,0.7315 4.22992,2.20957 7.00442,3.28461 5.88597,2.28062 7.23529,3.58417 8.73457,8.43828 2.35765,7.63317 1.90294,14.0327 -1.21889,17.15453 -3.3572,3.3572 -19.31992,7.15173 -29.71618,7.06388 -3.610701,-0.0305 -8.026991,-0.55684 -13.362674,-1.59255 z">
</path>
<path id="redcity" class="rc"
style="fill:#ff5555;stroke-width:0.531307"
d="m 109.27514,170.51745 c -1.97083,-0.79008 -5.92979,-4.25918 -6.81572,-5.97239 -0.44664,-0.8637 -1.17199,-2.79492 -1.61189,-4.29161 -0.43991,-1.49669 -1.164654,-3.13127 -1.610554,-3.63242 -0.470961,-0.52931 -0.690076,-1.41996 -0.522835,-2.12522 0.50968,-2.14937 1.772199,-5.21524 2.410439,-5.85349 0.34127,-0.34127 0.6205,-1.33274 0.6205,-2.20326 0,-0.87051 0.22535,-2.317 0.50079,-3.2144 1.05212,-3.42798 3.21957,-13.38571 3.21897,-14.78867 -2.6e-4,-0.80756 -0.20453,-1.88346 -0.45375,-2.39088 -1.27324,-2.59233 -2.14883,-4.7966 -2.45307,-6.1756 -0.2965,-1.34389 -1.80374,-3.24177 -5.902118,-7.43183 -0.607412,-0.621 -2.123361,-1.9659 -3.368775,-2.98867 -1.760128,-1.44545 -2.916987,-3.22023 -5.194845,-7.96958 -3.506531,-7.311156 -4.277569,-9.934897 -4.677789,-15.917893 -0.166933,-2.495564 -0.417975,-5.438532 -0.557871,-6.539931 -0.221242,-1.741827 -0.08786,-2.065846 1.024527,-2.488774 0.832139,-0.316379 1.603682,-1.336707 2.208684,-2.920879 0.672184,-1.760087 1.296437,-2.526667 2.253091,-2.766771 1.463543,-0.367327 7.541728,0.803132 14.441796,2.781011 2.47123,0.708367 5.12391,1.287939 5.89485,1.287939 0.77094,0 1.83537,0.479184 2.36539,1.064853 0.53002,0.585668 1.89322,1.315151 3.02933,1.621075 3.23801,0.871906 9.94498,7.943713 14.76739,15.570682 2.19164,3.466226 6.13658,9.084788 8.76655,12.485688 l 4.78175,6.18346 -0.0756,9.29785 c -0.0416,5.11382 -0.33196,10.37375 -0.64529,11.68874 -0.31332,1.31498 -1.15339,5.0543 -1.86681,8.3096 -1.50649,6.87401 -1.21612,6.25738 -7.16195,15.20945 -2.52759,3.80554 -5.07378,7.68691 -5.65822,8.62527 -1.73758,2.78983 -2.46275,3.47169 -5.1292,4.82288 -2.10389,1.06613 -3.29418,1.28104 -6.94035,1.25314 -2.42051,-0.0186 -4.95735,-0.25674 -5.63742,-0.52937 z">
</path>
<path id="peachcity" class="pc"
style="fill:#ff9955;stroke-width:0.531307"
d="m 61.027386,182.81041 c -4.252931,-1.93119 -7.431894,-5.68353 -12.498004,-14.75221 -1.682308,-3.01144 -8.242038,-10.56109 -13.157422,-15.14299 -8.732758,-8.1403 -13.004832,-17.1289 -11.241577,-23.65271 0.784462,-2.90241 3.581932,-6.5536 5.908882,-7.71213 1.011499,-0.5036 3.968387,-1.93591 6.570863,-3.18292 6.035233,-2.89184 9.347832,-5.96046 9.347832,-8.65935 0,-3.06735 -1.278133,-4.80954 -5.215464,-7.10906 -6.313357,-3.687203 -9.805995,-8.536949 -10.519391,-14.606842 -0.324919,-2.764555 -0.319691,-2.776802 2.889012,-6.765449 4.200583,-5.221629 5.819957,-6.308159 15.6352,-10.490547 1.388036,-0.591457 2.523702,-1.357995 2.523702,-1.703416 0,-1.008605 11.313345,-0.328869 14.876565,0.893826 2.338245,0.802351 2.958568,1.260366 3.104264,2.292027 0.100142,0.709115 0.544504,1.842431 0.98747,2.518481 0.65306,0.996699 0.73465,2.21755 0.431371,6.454828 -0.337135,4.710301 -0.264229,5.430491 0.739272,7.302807 0.612312,1.142442 1.113295,2.442528 1.113295,2.889083 0,1.278618 3.55858,6.33816 6.913788,9.829932 3.918794,4.0783 5.241695,6.26134 7.739528,12.77168 l 2.030666,5.29272 0.206084,11.42308 c 0.251312,13.93002 -0.251579,18.67761 -3.067224,28.95617 -3.987387,14.55602 -7.51255,19.72735 -15.413141,22.61071 -4.972677,1.81481 -6.873973,1.91889 -9.905571,0.54228 z">
</path>uj5u.com熱心網友回復：
歡迎來到 StackOverflow！所以，首先，由于您沒有包含完整版本的 HTML，我冒昧地創建了一個自己的 HTML。在您未來的問題中，請始終記住包含您正在做的最小可重復示例。
如果我理解正確，您希望<img>根據您單擊的 SVG 部分在標簽上顯示不同的影像。在下面的代碼段中，我只使用了一個<img>在點擊之間更改來源的標簽。我已將 SVG 的樣式放在<head>標簽上，這是它們大多數時候應該出現的地方（很少有例外）。我還重構了您的代碼以使用 .addEventListener()，它比 HTML onclick="" 更受歡迎。
<!DOCTYPE html>
<html>
<head>
<title>How to make a PIN</title>
<style type="text/css">
.land {
stroke: white;
stroke-width: 1.5;
stroke-miterlimit: 4;
}
.circle {
opacity: 0;
fill-opacity: 1;
stroke: black;
stroke-width: 0.5;
stroke-opacity: 1;
}
path:hover {
opacity: 0.5;
}
</style>
</head>
<body>
<div>
<svg viewBox="0 0 400 400" version="1.1" id="svg5" inkscape:version="1.1.2 (b8e25be833, 2022-02-05)" sodipodi:docname="colourfultest.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview id="namedview7" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageshadow="2" inkscape:pageopacity="0.0" inkscape:pagecheckerboard="0" inkscape:document-units="mm" showgrid="false" inkscape:zoom="0.49798681" inkscape:cx="307.23705" inkscape:cy="562.26389" inkscape:window-width="1300" inkscape:window-height="745" inkscape:window-x="-8" inkscape:window-y="-8" inkscape:window-maximized="1" inkscape:current-layer="svg5" />
<defs id="defs2" />
<path id="bluecity" class="bc" style="display:inline;fill:#008080;stroke-width:0.531307" d="m 88.728086,215.13469 c -4.383275,-0.85084 -8.447765,-1.76804 -9.0322,-2.03822 -0.584438,-0.27018 -3.45349,-0.6237 -6.375673,-0.78561 -2.922182,-0.1619 -6.180121,-0.54227 -7.239868,-0.84526 -2.218883,-0.63439 -4.714515,-2.90179 -4.714515,-4.28336 0,-2.25724 3.359785,-9.6287 5.317104,-11.66588 1.116415,-1.16196 2.110166,-2.31789 2.208339,-2.56873 0.09817,-0.25084 1.194615,-1.09253 2.436543,-1.87041 1.241928,-0.77789 2.258052,-1.61225 2.258052,-1.85413 0,-0.24188 1.29462,-0.75036 2.876934,-1.12995 2.699123,-0.64751 2.898968,-0.8076 3.233385,-2.5902 0.622493,-3.31818 3.923255,-8.57808 5.383028,-8.57808 0.779145,0 2.92205,-1.0698 3.394831,-1.6948 0.152498,-0.20159 1.179237,-0.97863 2.281645,-1.72674 2.574552,-1.74714 5.27671,-1.79093 7.265191,-0.11773 1.982278,1.66798 7.247568,3.73676 12.773188,5.01871 2.4931,0.5784 5.41484,1.65014 6.49277,2.38164 1.07792,0.7315 4.22992,2.20957 7.00442,3.28461 5.88597,2.28062 7.23529,3.58417 8.73457,8.43828 2.35765,7.63317 1.90294,14.0327 -1.21889,17.15453 -3.3572,3.3572 -19.31992,7.15173 -29.71618,7.06388 -3.610701,-0.0305 -8.026991,-0.55684 -13.362674,-1.59255 z"></path>
<path id="redcity" class="rc" style="fill:#ff5555;stroke-width:0.531307" d="m 109.27514,170.51745 c -1.97083,-0.79008 -5.92979,-4.25918 -6.81572,-5.97239 -0.44664,-0.8637 -1.17199,-2.79492 -1.61189,-4.29161 -0.43991,-1.49669 -1.164654,-3.13127 -1.610554,-3.63242 -0.470961,-0.52931 -0.690076,-1.41996 -0.522835,-2.12522 0.50968,-2.14937 1.772199,-5.21524 2.410439,-5.85349 0.34127,-0.34127 0.6205,-1.33274 0.6205,-2.20326 0,-0.87051 0.22535,-2.317 0.50079,-3.2144 1.05212,-3.42798 3.21957,-13.38571 3.21897,-14.78867 -2.6e-4,-0.80756 -0.20453,-1.88346 -0.45375,-2.39088 -1.27324,-2.59233 -2.14883,-4.7966 -2.45307,-6.1756 -0.2965,-1.34389 -1.80374,-3.24177 -5.902118,-7.43183 -0.607412,-0.621 -2.123361,-1.9659 -3.368775,-2.98867 -1.760128,-1.44545 -2.916987,-3.22023 -5.194845,-7.96958 -3.506531,-7.311156 -4.277569,-9.934897 -4.677789,-15.917893 -0.166933,-2.495564 -0.417975,-5.438532 -0.557871,-6.539931 -0.221242,-1.741827 -0.08786,-2.065846 1.024527,-2.488774 0.832139,-0.316379 1.603682,-1.336707 2.208684,-2.920879 0.672184,-1.760087 1.296437,-2.526667 2.253091,-2.766771 1.463543,-0.367327 7.541728,0.803132 14.441796,2.781011 2.47123,0.708367 5.12391,1.287939 5.89485,1.287939 0.77094,0 1.83537,0.479184 2.36539,1.064853 0.53002,0.585668 1.89322,1.315151 3.02933,1.621075 3.23801,0.871906 9.94498,7.943713 14.76739,15.570682 2.19164,3.466226 6.13658,9.084788 8.76655,12.485688 l 4.78175,6.18346 -0.0756,9.29785 c -0.0416,5.11382 -0.33196,10.37375 -0.64529,11.68874 -0.31332,1.31498 -1.15339,5.0543 -1.86681,8.3096 -1.50649,6.87401 -1.21612,6.25738 -7.16195,15.20945 -2.52759,3.80554 -5.07378,7.68691 -5.65822,8.62527 -1.73758,2.78983 -2.46275,3.47169 -5.1292,4.82288 -2.10389,1.06613 -3.29418,1.28104 -6.94035,1.25314 -2.42051,-0.0186 -4.95735,-0.25674 -5.63742,-0.52937 z"></path>
<path id="peachcity" class="pc" style="fill:#ff9955;stroke-width:0.531307" d="m 61.027386,182.81041 c -4.252931,-1.93119 -7.431894,-5.68353 -12.498004,-14.75221 -1.682308,-3.01144 -8.242038,-10.56109 -13.157422,-15.14299 -8.732758,-8.1403 -13.004832,-17.1289 -11.241577,-23.65271 0.784462,-2.90241 3.581932,-6.5536 5.908882,-7.71213 1.011499,-0.5036 3.968387,-1.93591 6.570863,-3.18292 6.035233,-2.89184 9.347832,-5.96046 9.347832,-8.65935 0,-3.06735 -1.278133,-4.80954 -5.215464,-7.10906 -6.313357,-3.687203 -9.805995,-8.536949 -10.519391,-14.606842 -0.324919,-2.764555 -0.319691,-2.776802 2.889012,-6.765449 4.200583,-5.221629 5.819957,-6.308159 15.6352,-10.490547 1.388036,-0.591457 2.523702,-1.357995 2.523702,-1.703416 0,-1.008605 11.313345,-0.328869 14.876565,0.893826 2.338245,0.802351 2.958568,1.260366 3.104264,2.292027 0.100142,0.709115 0.544504,1.842431 0.98747,2.518481 0.65306,0.996699 0.73465,2.21755 0.431371,6.454828 -0.337135,4.710301 -0.264229,5.430491 0.739272,7.302807 0.612312,1.142442 1.113295,2.442528 1.113295,2.889083 0,1.278618 3.55858,6.33816 6.913788,9.829932 3.918794,4.0783 5.241695,6.26134 7.739528,12.77168 l 2.030666,5.29272 0.206084,11.42308 c 0.251312,13.93002 -0.251579,18.67761 -3.067224,28.95617 -3.987387,14.55602 -7.51255,19.72735 -15.413141,22.61071 -4.972677,1.81481 -6.873973,1.91889 -9.905571,0.54228 z"></path>
</svg>
</div>
<div class="images-container">
<img id="image_tag" src="" style="display: none">
</div>
<script>
window.onload = function() {
document.getElementById("bluecity").addEventListener("click", showImage);
document.getElementById("redcity").addEventListener("click", showImage);
document.getElementById("peachcity").addEventListener("click", showImage);
}
function showImage() {
const imageSource = getImageSourceFromPath(this);
const imageElement = document.getElementById("image_tag");
imageElement.src = imageSource;
imageElement.style.display = "block";
}
function getImageSourceFromPath(path) {
switch (path.id) {
case "bluecity":
return "https://i.ibb.co/yfn8GwC/bluecity.jpg";
case "redcity":
return "https://i.ibb.co/yfn8GwC/redcity.jpg";
case "peachcity":
return "https://i.ibb.co/yfn8GwC/peachcity.jpg";
}
}
</script>
</body>
</html>希望能幫助到你。干杯!
uj5u.com熱心網友回復：
您還可以通過創建一個更獨立的 svg 來實作這一點：
svg 將包含一個<image>元素（不要與 html<img>標簽混淆）和您的 js 腳本。
影像元素
<image xmlns="http://www.w3.org/2000/svg" x="0" y="60%" width="50%" height="33%" id="image" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=" preserveAspectRatio="xMidYMid slice"/>
不像 html<img>標簽 svg<image>需要一個href屬性來參考影像檔案。
上面的示例默認使用透明 png（轉換為資料 URL）。
示例用法：獨立 svg
顯示代碼片段
<svg viewBox="0 0 400 400" id="svg5" xmlns="http://www.w3.org/2000/svg">
<style type="text/css">
.land {
stroke: #fff;
stroke-width: 1.5;
stroke-miterlimit: 4
}
.circle {
opacity: 0;
fill-opacity: 1;
stroke: #000;
stroke-width: .5;
stroke-opacity: 1
}
path:hover {
opacity: .5
}
</style>
<path id="bluecity" data-img="http://placekitten.com/g/200/300" class="city bc" style="fill:teal;stroke-width:.531307" d="M88.73 215.13c-4.39-.85-8.45-1.76-9.03-2.03-.59-.27-3.46-.63-6.38-.79a48.03 48.03 0 0 1-7.24-.84c-2.22-.64-4.71-2.9-4.71-4.29 0-2.25 3.36-9.63 5.31-11.66a19.58 19.58 0 0 0 2.21-2.57c.1-.25 1.2-1.1 2.44-1.87 1.24-.78 2.26-1.62 2.26-1.86s1.29-.75 2.87-1.13c2.7-.64 2.9-.8 3.24-2.59.62-3.32 3.92-8.58 5.38-8.58.78 0 2.92-1.06 3.4-1.69.15-.2 1.17-.98 2.28-1.73 2.57-1.74 5.27-1.79 7.26-.11 1.98 1.66 7.25 3.73 12.77 5.01 2.5.58 5.42 1.65 6.5 2.39 1.07.73 4.23 2.2 7 3.28 5.89 2.28 7.24 3.58 8.74 8.44 2.35 7.63 1.9 14.03-1.22 17.15-3.36 3.36-19.32 7.16-29.72 7.07a75.39 75.39 0 0 1-13.36-1.6z" />
<path id="redcity" data-img="http://placekitten.com/g/400/200" class="city rc" style="fill:#f55;stroke-width:.531307" d="M109.28 170.52c-1.98-.8-5.93-4.26-6.82-5.97-.45-.87-1.17-2.8-1.61-4.3a12.66 12.66 0 0 0-1.61-3.63 2.54 2.54 0 0 1-.53-2.12c.51-2.15 1.78-5.22 2.41-5.86.35-.34.63-1.33.63-2.2 0-.87.22-2.32.5-3.22 1.05-3.42 3.22-13.38 3.21-14.78 0-.81-.2-1.89-.45-2.4a31.7 31.7 0 0 1-2.45-6.17c-.3-1.34-1.8-3.24-5.9-7.43a54.2 54.2 0 0 0-3.37-3c-1.76-1.44-2.92-3.21-5.2-7.96-3.5-7.31-4.28-9.94-4.68-15.92-.16-2.5-.41-5.44-.55-6.54-.22-1.74-.1-2.06 1.02-2.49.83-.31 1.6-1.33 2.21-2.92.67-1.76 1.3-2.52 2.25-2.76 1.47-.37 7.54.8 14.44 2.78 2.48.7 5.13 1.28 5.9 1.28.77 0 1.83.48 2.36 1.07a7.6 7.6 0 0 0 3.03 1.62c3.24.87 9.95 7.94 14.77 15.57 2.2 3.47 6.14 9.09 8.77 12.49l4.78 6.18-.08 9.3c-.04 5.11-.33 10.37-.64 11.69-.31 1.31-1.15 5.05-1.87 8.3-1.5 6.88-1.21 6.26-7.16 15.22-2.53 3.8-5.07 7.68-5.66 8.62-1.74 2.8-2.46 3.47-5.13 4.82-2.1 1.07-3.3 1.28-6.94 1.26-2.42-.02-4.95-.26-5.63-.53z" />
<path id="peachcity" data-img="http://placekitten.com/g/500/300" class="city pc" style="fill:#f95;stroke-width:.531307" d="M61.03 182.81c-4.26-1.93-7.43-5.68-12.5-14.75-1.68-3.01-8.24-10.56-13.16-15.14-8.73-8.15-13-17.13-11.24-23.66.78-2.9 3.58-6.55 5.9-7.71 1.02-.5 3.98-1.94 6.58-3.18 6.04-2.9 9.35-5.96 9.35-8.66 0-3.07-1.28-4.81-5.22-7.11-6.31-3.69-9.8-8.54-10.52-14.6-.32-2.77-.32-2.78 2.9-6.77 4.2-5.22 5.81-6.31 15.63-10.5 1.39-.59 2.52-1.35 2.52-1.7 0-1 11.31-.33 14.88.9 2.34.8 2.96 1.26 3.1 2.29.1.7.55 1.84.99 2.52.65 1 .73 2.21.43 6.45-.34 4.71-.26 5.43.74 7.3a9.57 9.57 0 0 1 1.11 2.9c0 1.27 3.56 6.33 6.92 9.82 3.92 4.08 5.24 6.27 7.74 12.78l2.03 5.29.2 11.42c.25 13.93-.25 18.68-3.06 28.96-4 14.55-7.52 19.72-15.42 22.6-4.97 1.82-6.87 1.93-9.9.55z" />
<image xmlns="http://www.w3.org/2000/svg" x="0" y="60%" width="50%" height="33%" id="image" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRF////AAAAVcLTfgAAAAF0Uk5TAEDm2GYAAAAMSURBVHjaYmAACDAAAAIAAU9tWeEAAAAASUVORK5CYII=" preserveAspectRatio="xMidYMid slice"/>
<script>
const image = document.querySelector('#image');
const cities = document.querySelectorAll('.city');
cities.forEach(function(city){
city.addEventListener('click', function(e){
let imgSrc = e.currentTarget.getAttribute('data-img');
image.setAttribute('href', imgSrc);
})
})
</script>
</svg>不同的影像可以存盤在資料屬性中，如下所示：
<path id="bluecity" data-img="http://placekitten.com/g/200/300" class="city bc" />
通過這種方式，我們可以為許多形狀/城市使用通用影像交換功能
const image = document.querySelector('#image');
const cities = document.querySelectorAll('.city');
cities.forEach(function(city){
city.addEventListener('click', function(e){
let imgSrc = e.currentTarget.getAttribute('data-img');
image.setAttribute('href', imgSrc);
})
})
html
您可以使用一個<object>元素將此 svg 添加到您的 html 正文中：
<object data="colourfultest.svg" type="image/svg xml" width="400" height="400"></object>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/466816.html
標籤：javascript html 图片 svg
下一篇：切割銳利的霓虹燈文字和svg效果