内联移动svg样式属性

时间:2018-02-11 23:18:01

标签: css svg mapbox adobe-illustrator

在Mapbox Studio中,带有颜色的svg图像将导入为黑色和白色。根据{{​​3}}:

  

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

我是编辑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>

1 个答案:

答案 0 :(得分: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>