這是我的 DIV 的開始標簽，在 style 屬性中帶有 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');
}
uj5u.com熱心網友回復：
參考需要轉義。style 屬性在第一次出現"Using "should work 時結束。
<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');">
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/359353.html
上一篇：如何使空白可懸停？
下一篇：SVG顯示剪裁邊緣