内联移动 svg 样式属性

Question

在 Mapbox Studio 中，带有颜色的 svg 图像被导入为黑白图像。根据 troubleshooting website:

If you are able to add your SVG to Mapbox Studio, but appears black, it’s likely because you are using tags to assign style properties rather than using inline style attributes. Mapbox Studio does not support style properties added in tags.

我是编辑 svg 的新手 - 如何内联分配样式属性？

我的svg代码如下：

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.56 28.71">
    <defs>
        <style>
            .cls-1{fill:#f15824;}
        </style>
    </defs>
    <title>black_only_v3</title>
    <g id="svg_9" data-name="svg 9">
        <g id="svg_5" data-name="svg 5">
            <g id="svg_6" data-name="svg 6">
                <path id="svg_7" data-name="svg 7" d="M1.55,15.54C2.71,19,5.46,24,12,28.71,18.56,24,21.3,19,22.45,15.54a11.23,11.23,0,0,0,.83-4.14.59.59,0,0,0,0-.12h0a11.28,11.28,0,1,0-22.56,0s0,0,0,.12A11.19,11.19,0,0,0,1.55,15.54ZM12,2.79a8.7,8.7,0,1,1-8.7,8.7A8.69,8.69,0,0,1,12,2.79Z" transform="translate(-0.72 0)"/>
            </g>
        </g>
        <polygon id="svg_8" data-name="svg 8" class="cls-1" points="11.31 8.14 4.42 11.58 9.59 11.58 11.31 15.03 18.19 11.58 13.03 11.58 11.31 8.14"/>
    </g>
</svg>

Answer 1

可能这样就可以了：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22.56 28.71"><path d="M.83 15.54C1.99 19 4.74 24 11.28 28.71 17.84 24 20.58 19 21.73 15.54a11.23 11.23 0 0 0 .83-4.14.59.59 0 0 0 0-.12 11.28 11.28 0 1 0-22.56 0v.12a11.19 11.19 0 0 0 .83 4.14zM11.28 2.79a8.7 8.7 0 1 1-8.7 8.7 8.69 8.69 0 0 1 8.7-8.7z"/><path fill="#f15824" d="M11.31 8.14l-6.89 3.44h5.17l1.72 3.45 6.88-3.45h-5.16l-1.72-3.44z"/></svg>

内联移动 svg 样式属性

Moving svg style properties inline

css

svg

mapbox

adobe-illustrator