Html SVG:使用图像两次(过滤器转换)
我想在网页中使用SVG过滤器Html SVG:使用图像两次(过滤器转换),html,css,svg,svg-filters,Html,Css,Svg,Svg Filters,我想在网页中使用SVG过滤器feColorMatrix。以前,我成功地使它在Firefox和Chrome中工作(使用css属性filter:url())。但是,这在IE中不起作用,IE要求我同时插入图像和SVG过滤器 我正在寻找一个过滤器,当图像悬停时,它会淡出或消失。我想使用相同的图像两次(一次带过滤器,另一次不带),这样我可以使过滤后的图像在悬停时消失,但未过滤的图像仍然可见 问题是过滤器不再显示。两个图像都未经过滤。我的问题是:到目前为止我的代码有什么问题?对于我想要达到的效果,是否有更好
feColorMatrix
。以前,我成功地使它在Firefox和Chrome中工作(使用css属性filter:url()
)。但是,这在IE中不起作用,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;
}
<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 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>
svg {
width:30%;
float:left;
overflow:hidden;
height:300px;
}
svg .img1, svg .img2 {
position:absolute;
left:0px;
width:100%;
}
svg:hover .img1 {
opacity:0;
}
html:
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;
}
<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 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>
svg {
width:30%;
float:left;
overflow:hidden;
height:300px;
}
svg .img1, svg .img2 {
position:absolute;
left:0px;
width:100%;
}
svg:hover .img1 {
opacity:0;
}
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;
}
<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 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>
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的最后 删除z索引部分,并将过滤后的图像最后放置在DOM中,似乎会将过滤后的图像置于未过滤图像之上。此外,不透明度似乎确实适用于悬停。我会更新代码。谢谢你的指点!