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

This is the opening tag of my DIV, with the SVG filter in the style attribute, and the SVG encoded in a data 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');">

My code is based on this Chrome Developer blog article:

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

The only difference is that my styles are in the style attribute.

So the first code is solved now based on your comment on the escaping, but using that code with the styles in the attribute if I activate a facet on my page the filter is not applied anymore - so I cannot use this solution, that's probably because it's not cached since it's inline, and I cannot activate grid cache because I use a dynamic query for my grid. Because I replaced the DIV tag via find and replace after the page was generated, but before it was sent to the browser.

But this other way is also inline and it does work in Chrome and Firefox, could you by any chance tell why this kind of inlining is not working in 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');

}

CodePudding user response：

Quotations need escaping. The style attribute ends on the first occurrence of " Using " should work.

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