Question

我们正在尝试为svg中的图像添加gre / ayscale过滤器。此图像是群组中的众多图像之一。我们看到CSS正在应用，但是，当我们尝试将其应用于组中的＃id时，而不是整个SVG时，它不起作用。

以下是Fiddle

HTML：

<svg id="svg-image">
    <filter id="grayscale">
        <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0.3333 0.3333 0.3333 0 0
                                             0      0      0      1 0"/>
    </filter>
    <g>
        <image x="10" y="10" id="svg-image-gray" width="300" height="200" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />
        <image x="10" y="250" id="svg-image-reg" width="300" height="200" xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg" />        
    </g>
</svg>

CSS：

#svg-image-gray {
    filter: url(filters.svg#grayscale); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(1); /* Google Chrome & Safari 6+ */
}
#svg-image-gray:hover {
    filter: none;
    -webkit-filter: grayscale(0);
}

我们可以直接将过滤器放在图像上（fiddle）：

<image x="10" y="250" id="svg-image-gray" width="300" height="200"
xlink:href="http://css-plus.com/examples/2012/03/gaussian-blur/i/fence.jpg"
filter="url(#grayscale)"/>

但这没有利用CSS，如果有任何其他CSS绑定到SVG或id，它不起作用。尝试将过滤器应用于组也不起作用（fiddle）。

那么如何将过滤器应用于SVG中的特定＃id？

Answer 1

根据@Thomas W

更改了过滤网址

仅为SVG中的一个元素添加CSS过滤器

1 个答案: