javascript - SVG 图标看起来模糊 - Google map

Question

我在 Google map 上使用 SVG 图标作为标记。但图标看起来很模糊。我认为这是因为我设置了 scale:

    var icon = {
        path: "M418 1005q0 115 47 225t129 192t192 129t234 47t234 -47t192 -129t129 -192t47 -225q0 -222 -134 -388t-338 -209l-130 -410l-130 410q-204 43 -338 209t-134 388z",
        fillColor: '#328327',
        fillOpacity: 1,
        anchor: new google.maps.Point(1000,0),
        rotation: 180,
        strokeWeight: 3,
        strokeColor: 'rgba(0, 0, 0, 0.5)',
        strokeOpacity: 1,
        scale:.03
    };

JSFIDDLE

但是如果没有scale，图标会很大。我该如何修复它？

谢谢!

Answer 1

将图标大小调整为:

path: "m 3.2176386,30.816773 q 0,3.152175 2.09098,6.167299 2.09098,3.015125 5.7390104,5.262764 3.6481,2.247637 8.542,3.535917 4.8937,1.288281 10.4104,1.288281 5.5166,0 10.4104,-1.288281 4.8938,-1.28828 8.5419,-3.535917 3.6481,-2.247639 5.739,-5.262764 2.091,-3.015124 2.091,-6.167299 0,-6.08507 -5.9615,-10.635167 -5.9615,-4.550096 -15.0373,-5.728736 l -5.7835,-11.2381914 -5.7836,11.2381914 q -9.0757,1.17864 -15.0373004,5.728736 -5.96149,4.550097 -5.96149,10.635167 z",
anchor: new google.maps.Point(30,0),
scale: 1

您可以使用 inkscape.exe 编辑路径

updated fiddle