如何在Google地图符号中为单个SVG路径添加多种颜色?

时间:2017-03-07 10:54:38

标签: javascript google-maps svg

我想使用Google symbol,因为我想要旋转它。但它仅适用于this(注意var car)示例中所示的SVG路径。但正如你在那里看到的,它只有一种颜色,可以使用fillColor来改变。

但我想使用有两种颜色(红色和黑色)的SVG。下面是它的SVG代码。我该如何应用多种颜色?我所尝试的只是在一个字符串中添加所有路径,但这给了我一个黑色的图标。但我想在这个图标中至少有两种颜色。有没有办法这样做?

<svg version="1.1"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
     x="0px" y="0px" width="234.2px" height="543.1px" viewBox="0 0 234.2 543.1" style="enable-background:new 0 0 234.2 543.1;"
     xml:space="preserve">
<defs>
</defs>
<g>
    <path style="fill:#0FAF84;" d="M10.2,325.1c0,0,1.7,38.2,2.1,48.9c0.5,10.7-6.7,69.8-2.7,109.1c4,39.3,64.7,47,65.2,53.6
        c0.5,6.6,41.5,6.3,41.5,6.3s41,0.4,41.5-6.2c0.5-6.6,61.2-14.2,65.3-53.5c4.1-39.2-2.9-98.4-2.4-109.1c0.5-10.7,2.3-48.9,2.3-48.9
        l11.2-8.2v-6l-9.5-0.1c0,0-1.8-243.3-7.5-253.5c-5.8-10.2-12.9-39.6-31.7-47.3C166.6,2.6,117,0,117,0S67.3,2.5,48.5,10.1
        c-18.9,7.6-26,37-31.8,47.2c-5.8,10.2-8.1,253.5-8.1,253.5L0,310.7v7.8L10.2,325.1z"/>
    <path d="M195.6,349.6c0,0-10.5-68-13.9-68.7c-3.4-0.7-87.7,11.8-126.4-0.2c0,0-5.8-5.8-17.8,68.6c0,0,27.8,22.5,75.8,21.8
        C161.2,370.7,195.6,349.6,195.6,349.6z"/>
    <path d="M205.1,313.1c0,0-19.8-39.3-18.8-54.1c1-14.8-2.4-106,3.2-109.6c5.6-3.6,15.8,0,15.8,0L205.1,313.1z"/>
    <path d="M28.1,312.9c0,0,19.9-39.2,18.9-54c-1-14.8,2.7-106-2.9-109.6c-5.6-3.6-15.8,0-15.8,0L28.1,312.9z"/>
    <path d="M195.7,117.9L167.8,141l-106.7-0.1L38,120.5c0,0,14.6-52.8,78.9-52.9C179.4,67.4,195.7,117.9,195.7,117.9z"/>
    <path style="fill:#3EDDB0;" d="M203.2,47.3c0,0-9.5-24.8-16.8-27.9c-7.3-3.1-34.5-5.8-34.5-5.8s-3.7,2.7,0,4.4
        c3.7,1.7,27.5,2.1,32.3,6.5C189,29,195.8,46,198.1,47.3C200.5,48.7,203.2,47.3,203.2,47.3z"/>
    <path style="fill:#3EDDB0;" d="M30.1,47.1c0,0,9.6-24.8,16.9-27.8c7.3-3,34.5-5.7,34.5-5.7s3.7,2.7,0,4.4c-3.7,1.7-27.5,2-32.3,6.4
        c-4.8,4.4-11.6,21.4-14,22.8C32.8,48.5,30.1,47.1,30.1,47.1z"/>
    <path style="fill:#FFFFFF;" d="M206.1,489.2c0,0-5.8,20.4-41.5,27.5c0,0-2-16.3,12.9-24.1c15-7.8,22.1-13.9,25.8-11.2
        C207.1,484.1,208,485.2,206.1,489.2z"/>
    <path style="fill:#FFFFFF;" d="M29.8,489c0,0,5.8,20.4,41.4,27.6c0,0,2.1-16.3-12.9-24.1c-14.9-7.8-22.1-14-25.8-11.2
        C28.7,483.9,27.9,485,29.8,489z"/>
</g>
</svg>
编辑:我想使用SVG,以便旋转它(使用Google地图符号)。

0 个答案:

没有答案