如何在Google Maps API v3中的SVG路径中指示透明度？ [英] How do I indicate transparency in an SVG path in Google Maps API v3?

问题描述

我有一个自定义的SVG图像路径的一个公共汽车（见下文），它正在正确地绘制和切割我想要的透明部分，而不是前大灯。我已经浏览了 http：//www.w3。的SVG路径数据文档。 org / TR / SVG / paths.html＃PathData 并且必须缺少一些东西。我不知道如何（在路径数据中，或者不在其中）来确定填充什么以及透明遮罩或非填充区域的一部分。

  var busSvg = {
 //巴士车身
 //这是我的工作内容。 282宽... 322宽，双方增加
 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'，
底部：'h26 v25 c0,30,45,30,45,0 v-25 h200 v25 c0,30,45,30,45,0 v-25 h26'，
右：'v- 170 l-20，-150z'，
 //选取框
选取框：'m-60,10 h-182 c-20,0，-20，-25,0，-25 h182 c20， 0,20,25,0,25z'，
 //挡风玻璃
挡风玻璃：'m-220,150 c-11,0，-14，-8，-12，-16 l12，-85 c2 ，-10,5，-17,18，-17 h220 c13,0,17,7,18,171,12,85，c1,8，-1,16，-12,16 h-235z'，
 //轮胎
 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 ['挡风玻璃'] + busSvg ['tire_left'] + busSvg ['tire_right']，
 fillColor：red，
 fillOpacity：1，
比例：.3，// 0.05，
 strokeColor：black，
 strokeWeight：.5 
}; 
  

解决方案

填充规则确定形状的哪些部分位于内部/外部。

I've been searching on and off stackoverflow and haven't found the answer, so here goes...

I have a custom SVG image path of a bus (see below) and it's drawing properly and "cutting out" portions that I want transparent as it should, just not the headlights. I've looked through the SVG path data docs at http://www.w3.org/TR/SVG/paths.html#PathData and must be missing something. I don't know how (in the path data, or maybe NOT in it) to identify what gets filled and what is part of a transparency mask or non-fill area. Here's what I'm working with.

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

解决方案

fill-rule determines what portions of a shape are inside/outside it.

这篇关于如何在Google Maps API v3中的SVG路径中指示透明度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！