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

您有嵌套的.ui-grid-cell input[type='text']{ min-width:100%; }元素，其中每个<g>元素都定义了填充和描边。内部<g>元素的填充和描边将优先考虑。在您的示例中，内部<g>元素具有fill =＆＃34; none＆＃34;和笔画=＆＃34;黑＆＃34;。因此，没有填充画（正如Robert Longson在评论中指出的那样）。如果你颠倒了<g>元素的顺序，那么内部元素将具有fill =＆＃34;＃000000＆＃34;和stroke =＆＃34; none＆＃34;。在这种情况下，不会画任何笔画。

如果要在<g>元素的不同级别定义填充和描边，则删除＆＃34; none＆＃34;在内部<g>元素上设置，以便它不会覆盖外部<g>元素上的相应设置。例如......

<g>

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

1 个答案: