Question

我在特定的类上使用svg过滤器。 svg过滤器存储在.svg文件中.css文件的同一文件夹中。

我想使用css url()方法来调用过滤器，但它在IE 11和Chrome中不起作用。只有Firefox正确地做到了。为什么呢？

CSS / filter.svg

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" height="0" width="0">
    <filter id="highlight" color-interpolation-filters="sRGB" x="-50%" y="-50%" height="200%" width="200%">
        <!-- Take source alpha, offset it by angle/distance and blur it by size -->

        <feOffset id="offset" in="SourceAlpha" dx="0" dy="0" result="SA-offset"/>
        <feGaussianBlur id="blur" in="SA-offset" stdDeviation="15" result="SA-o-blur"/>

        <!-- Apply a contour by using a color curve transform on the alpha and clipping the result to the input -->

        <feComponentTransfer in="SA-o-blur" result="SA-o-b-contIN">
          <feFuncA id="contour" type="table" tableValues="0 1"/>
        </feComponentTransfer>

        <feComposite operator="in" in="SA-o-blur" in2="SA-o-b-contIN" result="SA-o-b-cont"/>

        <!-- Adjust the spread by multiplying alpha by a constant factor --> <feComponentTransfer in="SA-o-b-cont" result="SA-o-b-c-sprd">
          <feFuncA id="spread-ctrl" type="linear" slope="10"/>
        </feComponentTransfer>

        <!-- Adjust color and opacity by adding fixed offsets and an opacity multiplier -->
        <feColorMatrix id="recolor" in="SA-o-b-c-sprd" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.49 0" result="SA-o-b-c-s-recolor"/>

        <!-- Generate a reasonably grainy noise input with baseFrequency between approx .5 to 2.0. And add the noise with k1 and k2 multipliers that sum to 1 -->
        <feTurbulence result="fNoise" type="fractalNoise" numOctaves="6" baseFrequency="1.98"/>
        <feColorMatrix in="fNoise" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 7 -3" result="clipNoise"/>
        <feComposite id="noisemix" operator="arithmetic" in="SA-o-b-c-s-recolor" in2="clipNoise" k1="0.06" k2="0.94" result="SA-o-b-c-s-r-mix"/>

        <!-- Merge the shadow with the original -->
        <feMerge>
          <feMergeNode in="SA-o-b-c-s-r-mix"/>
          <feMergeNode in="SourceGraphic"/>
        </feMerge>
    </filter>
</svg>

CSS / style.css中

.highlight {
    filter: url("filter.svg#highlight");
}

注意：我不知道是否有这个问题，但页面的网址使用了一个查询字符串：http://example.com/mypage?foo=bar&bar=foo

CSS - svg过滤器url（）在IE 11和Chrome中无效

0 个答案: