必须如何更改此 SVG 文件才能允许 FileMaker 更改其颜色？

Question

我有一个由 Sketch 生成的 SVG 文件，如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<svg width="72px" height="47px" viewBox="0 0 72 47" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 42 (36781) - http://www.bohemiancoding.com/sketch -->
    <title>Group</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none"
       fill-rule="evenodd" stroke-linecap="square">
        <g id="Group" transform="translate(4.000000, 3.000000)"
           stroke="#000000" stroke-width="9">
            <path d="M0.5,39.5 L63.5,39.5" id="Line"></path>
            <path d="M0.5,20.5 L63.5,20.5" id="Line-Copy"></path>
            <path d="M0.5,1.5 L63.5,1.5" id="Line-Copy-2"></path>
        </g>
    </g>
</svg>

我正在尝试在文本编辑器中对其进行编辑，以便当我将其作为图标按钮导入时，它可以由 FileMaker 着色。

我反复读到，添加 class="fm_fill" 是必需的。我试过将它添加到外部 <g> 标签、内部 <g> 标签和每个 <path> 标签。我试过删除多余的属性，例如外部 <g> 标记的 stroke 和 stroke-width 属性。我试过合并 <g> 标签并更改外部 <g> 标签中的 fill 属性。我还尝试删除 <path> id 属性并使用自闭 <path> 标签。

我的测试是一个带有图标的简单按钮，我首先对其进行了着色。然后我添加编辑后的 SVG 并查看它是否保留了颜色。到目前为止，我还没能做到这一点。

Answer 1

假设您希望在 FileMaker 中为水平条着色，您需要将笔画转换为填充路径或矩形。

像这样：

    <?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="72px" height="47px" viewBox="0 0 72 47" overflow="inherit" xml:space="preserve">
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="Page-1">
    <g id="Group" transform="translate(4.000000, 3.000000)">
        <rect x="-4" y="35" width="72" height="9"/>
        <rect x="-4" y="16" width="72" height="9"/>
        <rect x="-4" y="-3" width="72" height="9"/>
    </g>
</g>
</svg>

您不 "need" 添加 class="fm_fill" 本身，但添加原始 SVG 不会在图标选择器中显示图标，只是一个空白条目。如果添加 class="fm_fill" 和默认填充颜色，您将在图标选择器中看到默认填充颜色的图标，使其更易于使用。

像这样：

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     x="0px" y="0px" width="72px" height="47px" viewBox="0 0 72 47" overflow="inherit" xml:space="preserve">
<title>Group</title>
<desc>Created with Sketch.</desc>
<g id="Page-1">
    <g id="Group" class="fm_fill" fill="grey" transform="translate(4.000000, 3.000000)">
        <rect x="-4" y="35" width="72" height="9"/>
        <rect x="-4" y="16" width="72" height="9"/>
        <rect x="-4" y="-3" width="72" height="9"/>
    </g>
</g>
</svg>

在下面的屏幕截图中，您可以看到两种变体。左边的蓝色图标只是您的原始转换图标，然后在 FileMaker 中变成了蓝色。它在图标选择器中不可见，它是所选图标旁边的空白条目。所选红色按钮的图标在 FileMaker 中为红色，并应用了 class 和默认填充，因此在图标选择器中可见。

希望对您有所帮助。

必须如何更改此 SVG 文件才能允许 FileMaker 更改其颜色？

How must this SVG file change to allow FileMaker to alter its color?

svg

filemaker