如何顺利更改SVG源
我遇到这个问题需要在SVG图像之间顺利切换。我需要从中得到：
到此：
我尝试过改变填充但它只改变了中风。这有可能用JS / jQuery或其他方式吗？
感谢。
1 个答案:
答案 0 :(得分：0)
你可以用css做到这一点。根本不需要任何脚本。
此代码将执行此操作。基本上，img1.svg是您已经显示的顶部图像，img2.svg是底部图像。当鼠标悬停在包含div（#crossfade）上时，其中一个图像（img1）从不透明变为透明，另一个图像（img2）从透明变为不透明。
注意：
- 在我的测试中，第一张图片是完全透明的，除了 行程。除了该区域，第二幅图像完全不透明 在＆＃39; square＆＃39; 之外
- 因此，我没有费心去运行SVG清洁剂或其他任何东西
小数点后的多位数。 （例如
stroke-width: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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？