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

Posted 2023-03-28

【中文标题】为啥 style 属性中定义的这个内联 SVG 过滤器不起作用？

【英文标题】：Why won't this inline SVG filter defined in the style attribute work?为什么 style 属性中定义的这个内联 SVG 过滤器不起作用？

【发布时间】：2021-12-24 07:28:44

【问题描述】：

这是我的 DIV 的开始标签，在 style 属性中带有 SVG 过滤器，并且 SVG 在数据 URI 中编码：

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

【问题讨论】：

尝试转义 style=" -> 从此处开始，但在 <svg xmlns=" 之后结束，以使用 " 内部样式属性。使用\"。

\" 不起作用。似乎正确的方法是使用"。参考：***.com/questions/4015345/…

【参考方案1】：

引号需要转义。 style 属性在第一次出现 " 时结束，使用 " 应该可以工作。

<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');">

【讨论】：

太好了，需要转义。但是我编辑了我的答案以指出为什么我不能使用该解决方案。如果你有机会告诉为什么通过 CSS 内联 SVG 的第二个版本在 Safari 中不起作用，我将不胜感激......

@AdamAlleman 我在 Safari 中尝试了几种使过滤器工作的方法。我能够使其在 Safari 中工作的唯一方法是在 html 中添加 svg，在 div 下方，然后使用 filter: url('#multitone_filter_1'); 进行过滤。过滤器已应用，但结果与 Chrome 不同。 Safari 中的颜色完全不同。不确定内联样式是否适用于 Safari。

问题是你分享的链接，他们的代码在 Safari 中也不起作用。

曾经在其中一个浏览器中存在一个错误，如果它作为过滤器元素的属性包含在内，它只实现颜色插值过滤器。如果你把它放在其中一个原语上（就像这样），它就行不通了。错误可能仍然存在。