как применить многоцветный формат SVG к символьной карте Google

#google-maps-api-3

#google-maps-api-3

Вопрос:

Я просто хочу спросить, как я могу применить этот преобразованный svg с многоцветным к пути к символам карты Google. я преобразовал свой png-файл в svg-файл, затем я открываю преобразованный svg, и это результат. но я не понимаю, как это применить.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="48pt" height="48pt" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path fill="#ffffff" d=" M 0.00 0.00 L 48.00 0.00 L 48.00 48.00 L 0.00 48.00 L 0.00 0.00 Z" />
<path fill="#5f6266" d=" M 6.05 9.92 C 13.25 7.57 21.24 9.24 27.86 12.57 C 25.12 14.01 22.16 14.94 19.12 15.47 C 19.13 16.17 19.13 16.86 19.11 17.55 C 20.36 16.94 21.65 16.36 23.04 16.17 C 23.44 19.41 23.05 23.50 26.27 25.46 C 30.72 27.07 35.91 25.05 38.57 21.24 C 42.31 23.12 45.02 26.31 47.09 29.88 C 44.10 34.05 40.82 39.80 34.94 39.57 C 31.14 40.43 30.10 36.12 27.98 33.98 C 25.76 30.93 21.49 32.43 18.61 30.54 C 15.29 28.54 12.37 25.90 8.80 24.31 C 7.07 23.58 5.59 22.44 4.26 21.13 C 4.18 22.82 4.08 24.50 3.95 26.19 C 2.31 24.39 1.57 22.03 0.43 19.93 C 1.71 16.38 2.06 11.56 6.05 9.92 Z" />
<path fill="#3f4042" d=" M 12.11 12.85 C 12.84 13.49 13.56 14.14 14.28 14.78 C 13.00 16.13 12.76 17.73 13.42 19.45 C 12.22 19.28 11.03 19.11 9.83 18.95 C 10.55 16.90 11.31 14.87 12.11 12.85 Z" />
<path fill="#3f4042" d=" M 27.86 12.57 C 28.93 13.21 29.75 14.12 30.23 15.29 C 29.55 15.37 28.19 15.53 27.51 15.61 C 26.02 15.79 24.53 15.97 23.04 16.17 C 21.65 16.36 20.36 16.94 19.11 17.55 C 19.13 16.86 19.13 16.17 19.12 15.47 C 22.16 14.94 25.12 14.01 27.86 12.57 Z" />
<path fill="#8b857b" d=" M 23.04 16.17 C 24.53 15.97 26.02 15.79 27.51 15.61 C 28.42 15.98 29.34 16.27 30.30 16.48 C 30.59 16.87 31.16 17.64 31.45 18.03 C 31.34 17.19 31.14 15.51 31.04 14.67 C 32.95 16.27 34.84 17.91 36.69 19.58 L 36.54 19.76 C 34.48 23.80 29.44 22.95 26.27 25.46 C 23.05 23.50 23.44 19.41 23.04 16.17 Z" />
<path fill="#6c6f74" d=" M 15.91 16.73 C 18.08 17.02 19.38 18.99 20.98 20.27 C 20.00 21.59 18.59 22.36 17.07 22.90 C 16.35 20.92 15.96 18.84 15.91 16.73 Z" />
<path fill="#3f4042" d=" M 26.27 25.46 C 29.44 22.95 34.48 23.80 36.54 19.76 C 37.05 20.13 38.06 20.87 38.57 21.24 C 35.91 25.05 30.72 27.07 26.27 25.46 Z" />
<path fill="#3f4042" d=" M 4.26 21.13 C 5.59 22.44 7.07 23.58 8.80 24.31 C 12.37 25.90 15.29 28.54 18.61 30.54 C 21.49 32.43 25.76 30.93 27.98 33.98 C 30.10 36.12 31.14 40.43 34.94 39.57 C 40.82 39.80 44.10 34.05 47.09 29.88 C 47.51 33.95 45.45 37.85 42.30 40.34 C 39.31 42.36 35.55 41.90 32.13 41.87 C 31.58 41.36 31.04 40.86 30.49 40.36 C 28.54 42.51 25.39 42.73 23.65 40.20 C 25.34 40.01 27.00 39.61 28.64 39.16 C 27.60 37.91 26.58 36.65 25.56 35.39 C 25.06 35.35 24.06 35.27 23.56 35.23 C 23.14 36.30 22.71 37.37 22.29 38.44 C 21.93 37.00 22.05 35.12 20.56 34.28 C 16.08 31.18 11.38 28.40 6.95 25.23 C 6.20 25.47 4.70 25.95 3.95 26.19 C 4.08 24.50 4.18 22.82 4.26 21.13 Z" />
<path fill="#3f4042" d=" M 19.44 22.97 C 21.89 21.90 21.38 26.96 19.14 25.99 C 17.64 25.45 18.14 23.40 19.44 22.97 Z" />
<path fill="#ffffff" d=" M 28.37 29.02 C 29.72 30.02 30.66 31.94 32.61 31.39 C 31.95 32.15 31.28 32.91 30.66 33.70 C 29.64 33.31 28.87 32.50 28.11 31.77 C 28.75 31.79 30.03 31.83 30.67 31.86 C 30.09 31.15 28.95 29.73 28.37 29.02 Z" />
<path fill="#b18d6c" d=" M 33.28 33.32 C 34.34 32.12 36.64 33.18 36.20 34.79 C 35.64 36.81 31.90 34.97 33.28 33.32 Z" />
<path fill="#8b857b" d=" M 23.56 35.23 C 24.06 35.27 25.06 35.35 25.56 35.39 C 26.58 36.65 27.60 37.91 28.64 39.16 C 27.00 39.61 25.34 40.01 23.65 40.20 L 23.12 40.28 C 22.92 39.82 22.50 38.90 22.29 38.44 C 22.71 37.37 23.14 36.30 23.56 35.23 Z" />
</svg>

    var iconcar = {
     anchor: new google.maps.Point(10, 50),
      path: //how to apply it here.

      scale: .8
    }

      var carPolyline = new google.maps.Polyline({
           map: map,
            geodesic : true,
            strokeColor : '#FF0000',
           strokeOpacity : 1.0,
            strokeWeight : 2,
           icons: [{
             icon: iconcar,
               scale: .8,   
             offset: '100%'
           }],
       });
  

Заранее благодарю вас.

Комментарии:

1. Вы можете объединить свои пути в один путь. Но для одного символа используется один цвет заливки и один цвет обводки.

2. @MrUpsidown, вы имеете в виду поместить их все внутрь » «?

3. @MrUpsidown, я в замешательстве

4. Да, вы могли бы. Вы хотя бы пробовали? Я не знаю, как выглядит ваш SVG. Если я объединю все вышеуказанные пути в один, то получу одноцветный квадрат. Я бы предположил, что у вас есть несколько путей над цветным квадратом, который, конечно, в конечном итоге будет только одним квадратом. Опять же, предполагается, что это одноцветный символ, а не многоцветный рисунок.

5. @MrUpsidown, спасибо, я не знаю, почему преобразованный svg выглядит квадратным … слишком плохо для меня.в любом случае. спасибо, что помогли мне.