javascript - 如何顺利更改SVG源

我遇到了这个问题，我需要在 SVG 图像之间顺利切换。我需要从中得到:

Normal

为此:

Hover

我试过改变填充，但它只改变了描边。这可以通过 JS/jQuery 或任何其他方式实现吗？

谢谢。

最佳答案

你可以用 css 做到这一点。根本不需要任何脚本。

这段代码可以做到。基本上，img1.svg 是您显示的顶部图像，img2.svg 是底部图像。当鼠标悬停在包含的 div (#crossfade) 上时，其中一个图像 (img1) 从不透明变为透明，另一个图像 (img2) 从透明变为不透明。

注意事项:

在我的测试中，第一张图片是完全透明的，除了中风。第二张图片完全不透明，除了区域在“广场”之外
我懒得运行 SVG 清洁器或其他类似的东西，因此小数点后的多位数字。 (例如 笔画宽度:2.93599999999999990)

我从这里得到代码:http://www.cssreset.com/how-to-create-the-perfect-image-crossfade-with-css3-transitions/

HTML

<!DOCTYPE html>
<html>
<head>
<style>
#crossfade {
    position:relative;
    width: 93px;
    height: 93px;
}


#crossfade img.top {
    opacity:    1;
}

#crossfade img.bottom {
    opacity:    0;
}

#crossfade img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 0.2s ease-in-out;
    -moz-transition: opacity 0.2s ease-in-out;
    -o-transition: opacity 0.2s ease-in-out;
    -ms-transition: opacity 0.2s ease-in-out;    
    transition: opacity 0.2s ease-in-out;
}

#crossfade:hover img.top {
    opacity:0;
}

#crossfade:hover img.bottom {
    opacity:1;
}

</style>
</head>
<body>
    <div id="crossfade">
        <img class="bottom" src="img2.svg" />
        <img class="top" src="img1.svg" />
    </div>
</body>
</html>

img1.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="93"
   height="93"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="New document 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="3.0844832"
     inkscape:cx="59.926082"
     inkscape:cy="41.920868"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="959"
     inkscape:window-height="551"
     inkscape:window-x="175"
     inkscape:window-y="79"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-959.36218)">
    <path
       style="fill:none;stroke:#c0a387;stroke-width:2.03600001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:10"
       d="m 3.018,1006.4853 c 0.0072,-17.50441 29.990486,-45.52256 44.753693,-45.56985 15.40148,-0.0436 43.957267,28.79451 43.638845,42.85735 0.248854,14.9565 -29.04024,45.4972 -44.753694,45.5698 C 30.38076,1049.5955 3.115676,1020.2529 3.018,1006.4853 z"
       id="rect2996"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       transform="translate(0,959.36218)"
       style="fill:none;stroke:#c0a387;stroke-width:2.03600001;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:10"
       d="m 61.197651,45.103561 c 0,2.588321 -2.214189,4.883169 -1.286883,7.142733 3.42091,8.335723 2.077738,8.900812 -5.604833,5.604666 -2.488442,-1.067647 -5.089951,2.139333 -8.027619,2.139333 -8.57918,0 -15.53398,-6.665017 -15.53398,-14.886732 0,-8.221714 6.9548,-14.886731 15.53398,-14.886731 8.579181,0 14.919335,6.665017 14.919335,14.886731 z"
       id="path3767"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="sssssss" />
    <path
       sodipodi:type="arc"
       style="fill:none;stroke:#c0a387;stroke-width:2.936;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:10"
       id="path3770"
       sodipodi:cx="39.521751"
       sodipodi:cy="44.750271"
       sodipodi:rx="1.5366156"
       sodipodi:ry="1.6595448"
       d="m 41.058367,44.750271 a 1.5366156,1.6595448 0 1 1 -3.073231,0 1.5366156,1.6595448 0 1 1 3.073231,0 z"
       transform="translate(0,959.36218)" />
    <path
       sodipodi:type="arc"
       style="fill:none;stroke:#c0a387;stroke-width:2.936;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:10"
       id="path3772"
       sodipodi:cx="46.098469"
       sodipodi:cy="44.873199"
       sodipodi:rx="1.4751509"
       sodipodi:ry="1.6595448"
       d="m 47.57362,44.873199 a 1.4751509,1.6595448 0 1 1 -2.950302,0 1.4751509,1.6595448 0 1 1 2.950302,0 z"
       transform="translate(0,959.36218)" />
    <path
       sodipodi:type="arc"
       style="fill:none;stroke:#c0a387;stroke-width:2.936;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:10"
       id="path3774"
       sodipodi:cx="52.859577"
       sodipodi:cy="44.934666"
       sodipodi:rx="1.3522217"
       sodipodi:ry="1.5980803"
       d="m 54.211799,44.934666 a 1.3522217,1.5980803 0 1 1 -2.704444,0 1.3522217,1.5980803 0 1 1 2.704444,0 z"
       transform="translate(0,959.36218)" />
  </g>
</svg>

img2.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="93"
   height="93"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="img1.svg">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="3.0844832"
     inkscape:cx="59.926082"
     inkscape:cy="41.920868"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="959"
     inkscape:window-height="551"
     inkscape:window-x="175"
     inkscape:window-y="79"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-959.36218)">
    <path
       style="fill:#c0a387;stroke:#c0a387;stroke-width:2.03600001000000000;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:10;fill-opacity:1"
       d="m 3.018,1006.4853 c 0.0072,-17.50441 29.990486,-45.52256 44.753693,-45.56985 15.40148,-0.0436 43.957267,28.79451 43.638845,42.85735 0.248854,14.9565 -29.04024,45.4972 -44.753694,45.5698 C 30.38076,1049.5955 3.115676,1020.2529 3.018,1006.4853 z"
       id="rect2996"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
    <path
       transform="translate(0,959.36218)"
       style="fill:none;stroke:#ffffff;stroke-width:2.03600001000000000;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:10"
       d="m 61.197651,45.103561 c 0,2.588321 -2.214189,4.883169 -1.286883,7.142733 3.42091,8.335723 2.077738,8.900812 -5.604833,5.604666 -2.488442,-1.067647 -5.089951,2.139333 -8.027619,2.139333 -8.57918,0 -15.53398,-6.665017 -15.53398,-14.886732 0,-8.221714 6.9548,-14.886731 15.53398,-14.886731 8.579181,0 14.919335,6.665017 14.919335,14.886731 z"
       id="path3767"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="sssssss" />
    <path
       sodipodi:type="arc"
       style="fill:none;stroke:#ffffff;stroke-width:2.93599999999999990;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:10"
       id="path3770"
       sodipodi:cx="39.521751"
       sodipodi:cy="44.750271"
       sodipodi:rx="1.5366156"
       sodipodi:ry="1.6595448"
       d="m 41.058367,44.750271 a 1.5366156,1.6595448 0 1 1 -3.073231,0 1.5366156,1.6595448 0 1 1 3.073231,0 z"
       transform="translate(0,959.36218)" />
    <path
       sodipodi:type="arc"
       style="fill:none;stroke:#ffffff;stroke-width:2.93599999999999990;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:10"
       id="path3772"
       sodipodi:cx="46.098469"
       sodipodi:cy="44.873199"
       sodipodi:rx="1.4751509"
       sodipodi:ry="1.6595448"
       d="m 47.57362,44.873199 a 1.4751509,1.6595448 0 1 1 -2.950302,0 1.4751509,1.6595448 0 1 1 2.950302,0 z"
       transform="translate(0,959.36218)" />
    <path
       sodipodi:type="arc"
       style="fill:none;stroke:#ffffff;stroke-width:2.93599999999999990;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:10"
       id="path3774"
       sodipodi:cx="52.859577"
       sodipodi:cy="44.934666"
       sodipodi:rx="1.3522217"
       sodipodi:ry="1.5980803"
       d="m 54.211799,44.934666 a 1.3522217,1.5980803 0 1 1 -2.704444,0 1.3522217,1.5980803 0 1 1 2.704444,0 z"
       transform="translate(0,959.36218)" />
  </g>
</svg>

关于javascript - 如何顺利更改SVG源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25471790/

javascript - 如何顺利更改SVG源

上一篇：jquery - 菜单项无法正常工作

下一篇：php - 禁用框中的换行符