堆栈内存溢出
  简体   繁体   English

如何顺利更改SVG源

[英]How to change SVG source smoothly

 原文  2014-08-24 12:40:56  6   1    javascript/ jquery/ css/ image/ svg

问题描述

I'm having this problem that I need to change between SVG images smoothly. 我遇到了这个问题，需要在SVG图像之间平滑切换。 I need to get from this: 我需要从中得到：

正常

to this: 对此：

徘徊

I have tried changing fill but it only changes stroke. 我尝试过更改填充，但它只会更改笔触。 Is this possible with JS/jQuery, or any other way? 使用JS / jQuery或其他方式是否可行？

Thanks. 谢谢。

1 个解决方案

解决方案1
 0  2014-08-24 16:14:11

You can do that just with css. 您可以使用CSS做到这一点。 No need for any script at all. 完全不需要任何脚本。

This code will do it. 这段代码可以做到。 Basically, img1.svg is the top image you've shown and img2.svg is the bottom image. 基本上，img1.svg是显示的顶部图像，img2.svg是显示的底部图像。 When the mouse hovers over the containing div (#crossfade), one of the images (img1) fades from opaque to transparent and the other image (img2) fades from transparent to opaque. 当鼠标悬停在包含的div（#crossfade）上时，其中一个图像（img1）从不透明逐渐变为透明，而另一图像（img2）从透明变为不透明。

Notes: 笔记：

  • In my test, the first image is entirely transparent, except for the stroke. 在我的测试中，除了笔触，第一张图片是完全透明的。 The second image is entirely opaque, except for the area outside the 'square' 第二个图像是完全不透明的，除了“正方形”之外的区域
  • I didn't bother to run SVG cleaner or anything else like that, hence the many digits after the decimal point. 我没有费心去运行SVG清洁器或类似的东西，因此小数点后有很多数字。 (eg stroke-width:2.93599999999999990 ) （例如stroke-width:2.93599999999999990 ）

I got the code from here: http://www.cssreset.com/how-to-create-the-perfect-image-crossfade-with-css3-transitions/ 我从这里获得了代码： http : //www.cssreset.com/how-to-create-the-perfect-image-crossfade-with-css3-transitions/

HTML 的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 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 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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 平滑地更改SVG的填充 - Smoothly change the filling of a SVG 悬停时平滑更改图像源 - Smoothly change image source on hover 如何更改 img 标签中 svg 源的颜色？ - how to change color of a svg source in a img tag? 如何在Raphael SVG地图中顺利交换Divs - How To Swap Divs Smoothly In Raphael SVG Map 如何使用 Javascript 平滑平移内联 SVG - How to pan an inline SVG smoothly with Javascript 如何顺利更改div的背景？ - how to change the background of a div smoothly? 如何使用JQuery动态更改已加载的svg源样式 - How to change loaded svg source style dynamically with JQuery 如何顺利改变 <img src=“…” /> 用jQuery？ - How to smoothly change <img src=“…” /> with jQuery? 如何顺利更改切换按钮暗模式 - How to change toggle button dark mode smoothly 如何在JavaScript中平稳地更改背景（动画）？ - How to smoothly change background (animate) in JavaScript?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM