SVG:使用图像两次(过滤器过渡)
SVG: use image twice (filter transition)
我想在网页中使用 SVG 过滤器 feColorMatrix
。以前,我成功地让它在 Firefox 和 Chrome 中工作(使用 css 属性 filter:url()
)。然而,这在 IE 中不起作用,这需要我同时插入图像和 SVG 滤镜。
我正在寻找图像上的滤镜,当图像悬停时该滤镜会淡出或消失。我想两次使用相同的图像(一个有过滤器,另一个没有),所以我可以让过滤后的图像在悬停时消失,但未过滤的图像仍然可见。
问题是过滤器不再显示。两张图片都没有过滤。我的问题是:到目前为止我的代码有什么问题?我想达到的效果有更好的方案吗?
在此先感谢您的建议/指点!
这是我目前的代码:
css:
svg {
width:30%;
float:left;
overflow:hidden;
height:300px;
}
svg image {
position:absolute;
left:0px;
}
svg .img1 {
z-index:2;
}
svg .img2 {
z-index:1;
}
svg:hover .img1 {
opacity:0;
}
html:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMax slice" viewBox="0 0 662 1000">
<defs>
<filter id="sepiatone">
<feColorMatrix values="0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0" />
</filter>
</defs>
<image xlink:href="/CMS/uploads/img/upload_2.jpg" class='img1' filter="url(#sepiatone)" width='662px' height='1000px' />
<image xlink:href="/CMS/uploads/img/upload_2.jpg" class='img2' width='662px' height='1000px' />
</svg>
更新
我想我快到了!我没有在 SVG 中放置两个 image
标签,而是使用 use
标签对它进行了两次引用。此外,迈克尔指出 z-index 不起作用。因此,我将过滤后的图像放在最新的 DOM 中。将 SVG 悬停时,过滤后的 SVG 的不透明度将发生变化,从而显示未过滤的图像。感谢迈克尔的指点!我会接受你的回答,因为它指出了问题。
这是代码:
HTML:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMax slice" viewBox="0 0 662 1000">
<defs>
<filter id="sepiatone">
<feColorMatrix values="0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0"></feColorMatrix>
</filter>
<g id="imgR">
<image xlink:href="/CMS/uploads/img/upload_2.jpg" width='662px' height='1000px'></image>
</g>
</defs>
<use xlink:href="#imgR" class='img2'></use>
<use xlink:href="#imgR" class='img1' filter="url(#sepiatone)"></use>
</svg>
CSS:
svg {
width:30%;
float:left;
overflow:hidden;
height:300px;
}
svg .img1, svg .img2 {
position:absolute;
left:0px;
width:100%;
}
svg:hover .img1 {
opacity:0;
}
很遗憾,SVG 不支持 z 索引。您想要放在最上面的任何内容都必须列在 DOM 的最后。
我想在网页中使用 SVG 过滤器 feColorMatrix
。以前,我成功地让它在 Firefox 和 Chrome 中工作(使用 css 属性 filter:url()
)。然而,这在 IE 中不起作用,这需要我同时插入图像和 SVG 滤镜。
我正在寻找图像上的滤镜,当图像悬停时该滤镜会淡出或消失。我想两次使用相同的图像(一个有过滤器,另一个没有),所以我可以让过滤后的图像在悬停时消失,但未过滤的图像仍然可见。
问题是过滤器不再显示。两张图片都没有过滤。我的问题是:到目前为止我的代码有什么问题?我想达到的效果有更好的方案吗?
在此先感谢您的建议/指点!
这是我目前的代码:
css:
svg {
width:30%;
float:left;
overflow:hidden;
height:300px;
}
svg image {
position:absolute;
left:0px;
}
svg .img1 {
z-index:2;
}
svg .img2 {
z-index:1;
}
svg:hover .img1 {
opacity:0;
}
html:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMax slice" viewBox="0 0 662 1000">
<defs>
<filter id="sepiatone">
<feColorMatrix values="0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0" />
</filter>
</defs>
<image xlink:href="/CMS/uploads/img/upload_2.jpg" class='img1' filter="url(#sepiatone)" width='662px' height='1000px' />
<image xlink:href="/CMS/uploads/img/upload_2.jpg" class='img2' width='662px' height='1000px' />
</svg>
更新
我想我快到了!我没有在 SVG 中放置两个 image
标签,而是使用 use
标签对它进行了两次引用。此外,迈克尔指出 z-index 不起作用。因此,我将过滤后的图像放在最新的 DOM 中。将 SVG 悬停时,过滤后的 SVG 的不透明度将发生变化,从而显示未过滤的图像。感谢迈克尔的指点!我会接受你的回答,因为它指出了问题。
这是代码:
HTML:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMax slice" viewBox="0 0 662 1000">
<defs>
<filter id="sepiatone">
<feColorMatrix values="0.3 0.4 0.2 0 0, 0.15 0.25 0.1 0 0, 0.05 0.2 0.1 0 0, 0 0 0 1 0"></feColorMatrix>
</filter>
<g id="imgR">
<image xlink:href="/CMS/uploads/img/upload_2.jpg" width='662px' height='1000px'></image>
</g>
</defs>
<use xlink:href="#imgR" class='img2'></use>
<use xlink:href="#imgR" class='img1' filter="url(#sepiatone)"></use>
</svg>
CSS:
svg {
width:30%;
float:left;
overflow:hidden;
height:300px;
}
svg .img1, svg .img2 {
position:absolute;
left:0px;
width:100%;
}
svg:hover .img1 {
opacity:0;
}
很遗憾,SVG 不支持 z 索引。您想要放在最上面的任何内容都必须列在 DOM 的最后。