时间戳

首页 > 解决方案 > SVG 颜色问题：RED 颜色显示为 GREY

delphi - SVG 颜色问题：RED 颜色显示为 GREY

问题描述

我得到了这个有问题的 SVG 图像：

 <?xml version="1.0" encoding="utf-8" standalone="no"?>
    <svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" version="1.1" id="Layer_1" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve" sodipodi:docname="tool-eye-dropper.svg" inkscape:version="1.0.2 (e86c870879, 2021-01-15, custom)">
      <metadata id="metadata12">
        <rdf:RDF>
          <cc:Work rdf:about="">
            <dc:format>
              image/svg+xml
            </dc:format>
            <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          </cc:Work>
        </rdf:RDF>
      </metadata>
      <defs id="defs10" />
      <sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1213" inkscape:window-height="942" id="namedview8" showgrid="false" inkscape:zoom="31.5" inkscape:cx="8" inkscape:cy="9.4708995" inkscape:window-x="347" inkscape:window-y="176" inkscape:window-maximized="0" inkscape:current-layer="icon" />
      <g id="icon">
        <path d="M12.828,7.837c-0.307,0,-0.596,-0.118,-0.813,-0.332l-3.737,-3.68c-0.448,-0.442,-0.448,-1.16,0,-1.602c0.217,-0.214,0.506,-0.332,0.813,-0.332c0.307,0,0.596,0.118,0.813,0.332l0.231,0.227c0.045,-0.158,0.13,-0.302,0.251,-0.421c0.01,-0.01,1.02,-1.002,1.084,-1.06C12.177,0.336,12.956,0,13.722,0c0.917,0,1.712,0.494,2.075,1.29c0.436,0.956,0.161,2.122,-0.738,3.119c-0.075,0.083,-1.112,1.108,-1.123,1.118c-0.121,0.119,-0.267,0.203,-0.427,0.247l0.132,0.13c0.448,0.442,0.448,1.16,0,1.602C13.424,7.72,13.135,7.837,12.828,7.837z" fill-rule="evenodd" fill="#3E79B4" id="path2" />
        <path d="M0.673,16c-0.26,0,-0.508,-0.176,-0.619,-0.439c-0.105,-0.249,-0.055,-0.508,0.132,-0.693c1.038,-1.022,1.585,-1.79,2.277,-2.762c1.061,-1.491,2.082,-3.046,5.871,-6.777l0.101,-0.099l0.102,0.097c0.763,0.723,1.03,0.991,1.266,1.227c0.225,0.225,0.402,0.402,0.942,0.907l0.108,0.101l-0.105,0.103c-3.925,3.865,-5.47,4.888,-6.953,5.952c-0.934,0.67,-1.672,1.199,-2.674,2.186C0.99,15.932,0.835,16,0.673,16z" fill-rule="evenodd" fill="#797979" id="path4" style="fill:#ff0000" />
      </g>
    </svg>

在 INKSCAPE 中，正确显示：

在此处输入图像描述

但是，对于其他质量较低的 SVG 查看器（例如我当前安装的 Windows SVG Shell-Extension 和 GetIt 中可用的 Delphi SVGIconImageList VCL），它会显示如下：

在此处输入图像描述

必须在 SVG XML 中进行哪些更改才能使其与质量较低的 SVG-Viewer 兼容？

标签： delphisvgdelphi-10.4-sydney

解决方案

这是一个非常简单的 SVG。如果我们删除不必要的部分，它看起来像这样：

<path d="..." fill-rule="evenodd" fill="#3E79B4" id="path2" />
<path d="..." fill-rule="evenodd" fill="#797979" id="path4" style="fill:#ff0000" />

第一个是头部；第二个是管子。如您所见，管子使用 SVGfill属性和 CSS 规则指定其填充颜色。而这些不同！

非浏览器渲染器通常不支持 CSS，所以他们读起来像

<path d="..." fill-rule="evenodd" fill="#3E79B4" id="path2" />
<path d="..." fill-rule="evenodd" fill="#797979" id="path4" />

所以管子变成灰色的。

另一方面，现代浏览器会给 CSS 规则更高的优先级，因此它会有效地使用

<path d="..." fill-rule="evenodd" fill="#3E79B4" id="path2" />
<path d="..." fill-rule="evenodd" style="fill:#ff0000" id="path4" />

所以管子变红了。

要将其变成高兼容性的 SVG，只需删除 CSS（您非常不需要它！）并确保使用您想要的颜色作为fill属性。

推荐阅读