内联移动 svg 样式属性答案

【问题标题】：Moving svg style properties inline内联移动 svg 样式属性
【发布时间】：2018-02-13 00:27:36
【问题描述】：

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

如果您能够将 SVG 添加到 Mapbox Studio，但显示为黑色，这可能是因为您使用标签来分配样式属性而不是使用内联样式属性。 Mapbox 工作室不支持在标签中添加样式属性。

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

我的 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>

【问题讨论】：

标签： css svg mapbox adobe-illustrator

【解决方案1】：

大概这样就OK了：

<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>

【讨论】：