stackoom
  简体   繁体   中英

How to change SVG source smoothly

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

Question

I'm having this problem that I need to change between SVG images smoothly. 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?

Thanks.

1 answers

solution1
 0  2014-08-24 16:14:11

You can do that just with 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. 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.

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. (eg stroke-width:2.93599999999999990 )

I got the code from here: 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Smoothly change the filling of a SVG Smoothly change image source on hover how to change color of a svg source in a img tag? How To Swap Divs Smoothly In Raphael SVG Map How to pan an inline SVG smoothly with Javascript how to change the background of a div smoothly? How to change loaded svg source style dynamically with JQuery How to smoothly change <img src=“…” /> with jQuery? How to change toggle button dark mode smoothly How to smoothly change background (animate) in JavaScript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM