3

svg の画像に gre/ayscale フィルターを追加しようとしています。この画像は、グループ内の多数の画像の 1 つです。idCSS が適用されていることがわかりますが、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);
}

次のように、画像に直接フィルタを適用できます ( 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 を利用していません。また、SVG または ID に結び付けられた他の CSS がある場合、それは機能しません。グループにフィルターを適用しようとしても機能しません ( fiddle )。

idでは、SVG 内の特定の # にフィルターを適用するにはどうすればよいでしょうか?

4

0 に答える 0