为什么在 style 属性中定义的这个内联 SVG 过滤器不起作用？

Question

这是我的 DIV 的开始标记，样式属性中有 SVG 过滤器，数据 URI 中编码的 SVG：

<div class="wpgb-card-media-thumbnail" style="filter: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><filter id="multitone_filter_1"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" 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"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.4117647058823529 0.0392156862745098 0.9647058823529412"></feFuncR><feFuncG type="table" tableValues="0.7490196078431373 0.054901960784313725 0.8901960784313725"></feFuncG><feFuncB type="table" tableValues="0.6039215686274509 0.058823529411764705 0.5803921568627451"></feFuncB></feComponentTransfer></filter></svg>#multitone_filter_1');">

我的代码基于这篇 Chrome 开发者博客文章：

https://developer.chrome.com/blog/cvd/

唯一的区别是我的样式在 style 属性中。

所以第一个代码现在根据您对转义的评论解决了，但是如果我在我的页面上激活一个方面，则使用该代码和属性中的样式过滤器不再应用 - 所以我不能使用它解决方案，这可能是因为它没有缓存，因为它是内联的，而且我无法激活网格缓存，因为我对我的网格使用了动态查询。因为我在页面生成之后，但在发送到浏览器之前，通过查找和替换替换了 DIV 标签。

但是这种内联方式也是内联的，它在 Chrome 和 Firefox 中确实有效，您能不能告诉我为什么这种内联方式在 Safari 中不起作用？

div.wp-grid-builder.wpgb-grid-1.wpgb-enabled div.wpgb-card-media-thumbnail { 

  filter: url('data:image/svg+xml,\
    <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="multitone_filter_1"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" 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"></feColorMatrix><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="table" tableValues="0.4117647058823529 0.0392156862745098 0.9647058823529412"></feFuncR><feFuncG type="table" tableValues="0.7490196078431373 0.054901960784313725 0.8901960784313725"></feFuncG><feFuncB type="table" tableValues="0.6039215686274509 0.058823529411764705 0.5803921568627451"></feFuncB></feComponentTransfer></filter>\
    </svg>#multitone_filter_1');

}

Answer 1

引用需要转义。样式属性在第一次出现 " 时结束，使用 " 应该有效。

<div class="wpgb-card-media-thumbnail" style="filter: url('data:image/svg+xml,<svg xmlns=&quot;http://www.w3.org/2000/svg&quot;><filter id=&quot;multitone_filter_1&quot;><feColorMatrix type=&quot;matrix&quot; color-interpolation-filters=&quot;sRGB&quot; values=&quot;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&quot;></feColorMatrix><feComponentTransfer color-interpolation-filters=&quot;sRGB&quot;><feFuncR type=&quot;table&quot; tableValues=&quot;0.4117647058823529 0.0392156862745098 0.9647058823529412&quot;></feFuncR><feFuncG type=&quot;table&quot; tableValues=&quot;0.7490196078431373 0.054901960784313725 0.8901960784313725&quot;></feFuncG><feFuncB type=&quot;table&quot; tableValues=&quot;0.6039215686274509 0.058823529411764705 0.5803921568627451&quot;></feFuncB></feComponentTransfer></filter></svg>#multitone_filter_1');">

为什么在 style 属性中定义的这个内联 SVG 过滤器不起作用？

Why won't this inline SVG filter defined in the style attribute work?

css

svg

svg-filters