如何在 Google Maps API v3 中指示 SVG 路径的透明度？答案

【问题标题】：How do I indicate transparency in an SVG path in Google Maps API v3?如何在 Google Maps API v3 中指示 SVG 路径的透明度？
【发布时间】：2012-10-18 23:36:22
【问题描述】：

我一直在stackoverflow上和下搜索，但没有找到答案，所以这里......

我有一个公共汽车的自定义 SVG 图像路径（见下文），它可以正确绘制并“切掉”我希望透明的部分，而不是前灯。我已经查看了http://www.w3.org/TR/SVG/paths.html#PathData 的 SVG 路径数据文档，并且一定遗漏了一些东西。我不知道如何（在路径数据中，或者可能不在其中）识别填充的内容以及透明蒙版或非填充区域的一部分。这就是我正在使用的。

var busSvg = {
    // Bus body
    // 282 wide... 322 wide with the sides added
    top : 'c-4,-20,-18,-30,-38,-38 c-20,-8,-68,-18,-113,-19 c-35,1,-83,11,-113,19 c-20,8,-34,10,-38,38',
    left : ' l-20,150 v170',
    bottom : ' h26 v25 c0,30,45,30,45,0 v-25 h200 v25 c0,30,45,30,45,0 v-25 h26',
    right : ' v-170 l-20,-150z',
    // Marquee
    marquee : 'm-60,10 h-182 c-20,0,-20,-25,0,-25 h182 c20,0,20,25,0,25z',
    // Windshield
    windshield : 'm-220,150 c-11,0,-14,-8,-12,-16 l12,-85 c2,-10,5,-17,18,-17 h220 c13,0,17,7,18,17 l12,85, c1,8,-1,16,-12,16 h-235z',
    // Tires
    tire_left : 'm15,100 c0,30,45,30,45,0 c0,-30,-45,-30,-45,0',
    tire_right : 'm180,0 c0,30,45,30,45,0 c0,-30,-45,-30,-45,0',
};

var busIcon = {
    path: 'M0,-100 '+busSvg['top']+busSvg['left']+busSvg['bottom']+busSvg['right']+busSvg['marquee']+busSvg['windshield']+busSvg['tire_left']+busSvg['tire_right'],
    fillColor: "red",
    fillOpacity: 1,
    scale: .3, //.05,
    strokeColor: "black",
    strokeWeight: .5
};

【问题讨论】：

标签： google-maps svg

【解决方案1】：

fill-rule 确定形状的哪些部分在其内部/外部。

【讨论】：

感谢您的回复，罗伯特。查看您链接到的文档，我注意到圆圈中的路径交替方向（顺时针和逆时针）。当我修改我的路径来做到这一点时，我在没有定义填充规则的情况下获得了预期的效果。