3

我们正在尝试向 svg 中的图像添加 gre/ayscale 过滤器。这张图片是一组图片中的一张。我们看到 CSS 正在被应用，但是，当我们尝试将它应用到id特定于组内的 # 而不是整个 SVG 时，它不起作用。

这是小提琴

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);
}

我们可以像这样（小提琴）直接将过滤器放在图像上：

<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，它就不起作用。尝试将过滤器应用于组也不起作用（小提琴）。

那么如何将过滤器应用于idSVG 中的特定 # 呢？

4

0 回答 0