如何定义 SVG 来渲染填充和描边？

Question

我有一个 SVG 文件，下面提供了代码，它有填充和描边参数。我在外部应用程序 (Mapnik) 中使用此 SVG，我在其中修改它以更改填充颜色、描边颜色和描边形状等参数的数量。不幸的是，即使当我在一个简单的查看器中查看这个 SVG 时，也只会渲染填充或描边，这取决于先定义哪个。我尝试重新排序 <g> 标签并将 </g> 放置在不同的位置，但无法实现目标 - 同时渲染填充和描边。我应该如何修改 SVG 代码以获得所需的结果？

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="22.5778mm" height="22.5778mm"
 viewBox="0 0 64 64"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<title>SVG Vector primitive</title>
<desc>An SVG drawing created by the QSvgGenerator </desc>
<defs>
</defs>

<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(20,0,0,20,32,32)"
font-family="Helvetica" font-size="12" font-weight="400" font-style="normal" >
<g fill="none" stroke="black" stroke-width="0.2" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >

<path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M-0.224514,-0.309017 L-0.951057,-0.309017 L-0.363271,0.118034 L-0.587785,0.809017 L0,0.381966 L0.587785,0.809017 L0.363271,0.118034 L0.951057,-0.309017 L0.224514,-0.309017 L0,-1 L-0.224514,-0.309017"/>
</g>
</g>
</svg>

Answer 1

您嵌套了 <g> 个元素，其中每个 <g> 元素都定义了填充和描边。内部 <g> 元素的填充和描边将优先。在您的示例中，内部 <g> 元素具有 fill="none" 和 stroke="black"。因此，没有绘制填充（正如 Robert Longson 在评论中指出的那样）。如果您颠倒 <g> 元素的顺序，则内部元素将具有 fill="#000000" 和 stroke="none"。那样的话，就不会画笔画了。

如果要在 <g> 元素的不同级别定义填充和描边，请删除内部 <g> 元素上的 "none" 设置，这样它就不会覆盖外部 <g> 元素上的相应设置。例如...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="22.5778mm" height="22.5778mm"
 viewBox="0 0 64 64"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.2" baseProfile="tiny">
<title>SVG Vector primitive</title>
<desc>An SVG drawing created by the QSvgGenerator </desc>
<defs>
</defs>

<g fill="#000000" fill-opacity="1" stroke="none" transform="matrix(20,0,0,20,32,32)"
font-family="Helvetica" font-size="12" font-weight="400" font-style="normal" >
<g stroke="black" stroke-width="0.2" fill-rule="evenodd" stroke-linecap="square" stroke-linejoin="bevel" >

<path vector-effect="non-scaling-stroke" fill-rule="evenodd" d="M-0.224514,-0.309017 L-0.951057,-0.309017 L-0.363271,0.118034 L-0.587785,0.809017 L0,0.381966 L0.587785,0.809017 L0.363271,0.118034 L0.951057,-0.309017 L0.224514,-0.309017 L0,-1 L-0.224514,-0.309017"/>
</g>
</g>
</svg>

如何定义 SVG 来渲染填充和描边？

How to define SVG to render both fill and stroke?

xml

svg

mapnik