Question

我有一个vaadin项目，它使用scss。我正在尝试使用我的scss添加svg过滤器。

.my-img{
   filter:url(filters.svg#opacityRed)
}

我在与css文件相同的文件夹上有一个svg文件，并且我在那里阅读的所有文档应该没问题。

正如w3schools.com所说：

url（）函数获取指定SVG过滤器的XML文件的位置，并且可以包含指向特定过滤器元素的锚点。例如：

filter：url（svg-url＃element-id）

但是我的scss编译器没有编译。它会抛出这样的错误：

SEVERE: encountered "url(filters.svg#redOpacity)". Was expecting one of: "=" "," ";" "." ")" "and" "or" "not" ":" "#{" "to" "through" "in" "from" <STRING> <NUMBER> <IDENT> <NOT_FUNCTION> <FUNCTION> 
org.w3c.css.sac.CSSParseException: encountered "url(filters.svg#redOpacity)". Was expecting one of: "=" "," ";" "." ")" "and" "or" "not" ":" "#{" "to" "through"

与Vaadin的关系是，在html中包含我的svg过滤器并不容易，所以我正在寻找一种从文件中导入它的方法，似乎css过滤器选项很容易。

否则我的svg文件看起来像这样

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
    <filter id="redOpacity" color-interpolation-filters="sRGB" x="0" y="0">  
       <feColorMatrix type="matrix"
            values=".50  0  0   0   0.50
                    0.95 0  0   0   0.05
                    0.95 0  0   0   0.05
                    0    0  0   1   0" />
    </filter>
</defs>

知道如何在css中放置网址过滤器？或者有什么问题？

修改

我发现这是带有this question的Chrome中的一个错误，它在Firefox上运行正常，所以我将过滤器应用于仅使用浏览器黑客的firefox，更改我的css如下

.my-img{
   -webkit-filter:url(filters.svg#opacityRed)
}

更改为webkit可避免编译错误。但最终我想在“所有”现代浏览器中应用过滤器。

使用外部svg过滤url（）

0 个答案: