Javascript 生成的 svg 与 styles 在浏览器中可以正常工作，但在浏览器之外不能正常工作
[英]Javascript generated svg with styles works fine in browsers but not outside browser
问题描述
I have this javscript generated svg
我有这个 javscript 生成的 svg
<svg width="240" height="320" viewBox="0 0 240 320" fill="none" xmlns="http://www.w3.org/2000/svg"> <svg> <path d="M228 319.5H12C5.64873 319.5 0.5 314.351 0.5 308V12C0.5 5.64873 5.64873 0.5 12 0.5H159.175C159.571 0.5 159.952 0.656748 160.233 0.936021L239.057 79.2681C239.341 79.5497 239.5 79.9326 239.5 80.3321V308C239.5 314.351 234.351 319.5 228 319.5Z" fill="#FFF9F2" stroke="#FFC681"/> </svg> <svg style="filter: invert(1); mix-blend-mode: color-burn"> <path fill-rule="evenodd" clip-rule="evenodd" d="M99 117C96.7909 117 95 118.791 95 121V148.939C94.3386 148.979 93.6717 149 93 149C75.3269 149 61 134.673 61 117C61 99.3269 75.3269 85 93 85C110.673 85 125 99.3269 125 117H99ZM125 117H155C157.209 117 159 118.791 159 121V177C159 179.209 157.209 181 155 181H99C96.7909 181 95 179.209 95 177V148.939C111.741 147.906 125 134.001 125 117Z" fill="#FFC681"/> </svg> </svg>
this is the desired result in any program.这是任何程序的期望结果。
it has some styling ( style="filter: invert(1); mix-blend-mode: burn" ) and inside the browser this works as expected, but these styles are totally ignored if opening it in anyother program.它有一些样式（ style="filter: invert(1); mix-blend-mode: burn" ）并且在浏览器内部按预期工作，但是如果在任何其他程序中打开它，这些 styles 将被完全忽略。
what can I do in order to include the styling for the svg outside the browser?我该怎么做才能在浏览器外部包含 svg 的样式？
1 个解决方案
解决方案1
1 已采纳 2022-08-05 22:28:44
You might be able to replace the CSS filter and the blend mode with an equivalent SVG <filter> , as described here .您也许可以用等效的 SVG <filter>替换 CSS 过滤器和混合模式，如此处所述。 With librsvg v2.50, which is what Ubuntu uses for rendering, the following does work, same as Chrome, but it fails in Firefox.使用librsvg v2.50，这是 Ubuntu 用于渲染的内容，以下工作与 Chrome 相同，但在 Firefox 中失败。 For Windows, you'll have to hope.对于 Windows，您必须抱有希望。 mode="color-burn" is an attribute value that was only introduced with SVG 2. Some renderers might not support it. mode="color-burn"是仅在 SVG 2 中引入的属性值。某些渲染器可能不支持它。
<svg width="240" height="320" viewBox="0 0 240 320" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="inverse-burn" color-interpolation-filters="sRGB"> <feComponentTransfer result="invert"> <feFuncR type="table" tableValues="1 0"/> <feFuncG type="table" tableValues="1 0"/> <feFuncB type="table" tableValues="1 0"/> </feComponentTransfer> <feImage xlink:href="#background" result="base" x="0" y="0" width="240" height="320" /> <feBlend in="invert" in2="base" mode="color-burn" /> </filter> <path id="background" d="M228 319.5H12C5.64873 319.5 0.5 314.351 0.5 308V12C0.5 5.64873 5.64873 0.5 12 0.5H159.175C159.571 0.5 159.952 0.656748 160.233 0.936021L239.057 79.2681C239.341 79.5497 239.5 79.9326 239.5 80.3321V308C239.5 314.351 234.351 319.5 228 319.5Z" fill="#FFF9F2" stroke="#FFC681"/> <g style="filter:url(#inverse-burn)"> <path fill-rule="evenodd" d="M99 117C96.7909 117 95 118.791 95 121V148.939C94.3386 148.979 93.6717 149 93 149C75.3269 149 61 134.673 61 117C61 99.3269 75.3269 85 93 85C110.673 85 125 99.3269 125 117H99ZM125 117H155C157.209 117 159 118.791 159 121V177C159 179.209 157.209 181 155 181H99C96.7909 181 95 179.209 95 177V148.939C111.741 147.906 125 134.001 125 117Z" fill="#FFC681"/> </g> </svg>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.