0

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

}
Adam Alleman
  • 13
  • 4
  • Try escaping the Quotation's in the `style="` -> began here but ended after ` – atiqorin Nov 11 '21 at 21:04
  • `\"` doesn't work. seems the correct way is using `"`. refer :https://stackoverflow.com/questions/4015345/how-do-i-properly-escape-quotes-inside-html-attributes – atiqorin Nov 11 '21 at 21:12

1 Answers1

0

Quotations need escaping. The style attribute ends on the first occurrence of " Using &quot; 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');">
atiqorin
  • 446
  • 3
  • 13
  • Great that was it, needed the escaping. But I edited my answer to point out why I cannot use that solution. If by any chance you could tell why the second version of inlining the SVg via CSS doesn't work in Safari, I would be grateful... – Adam Alleman Nov 11 '21 at 22:14
  • 1
    @AdamAlleman I tried in Safari few ways to make the filter work. The only way I was able to make it work in Safari is by adding the svg in the html, below the div and then on filter using just `filter: url('#multitone_filter_1');`. The filter is applied but the result is different then Chrome. The color is totally different in Safari. Not sure if inline style would work in Safari. – atiqorin Nov 13 '21 at 01:01
  • The thing is the link you shared, their code also doesn't work in Safari. – atiqorin Nov 13 '21 at 01:10
  • There used to be a bug in one of the browsers where it only implemented color-interpolation-filters if it was included as an attribute on the filter element. It wouldn't work if you put it on one of the primitives (like this has it). Bug might still be there. – Michael Mullany Nov 30 '21 at 13:06