Google지도에서 복잡한 SVG 이미지 경로를 올바르게 사용하는 방법

Question

사전 정의 된 지점 (현재)의 방향을 표시하는 작은 Google지도 페이지를 만들었습니다. 이것은 내가 Google지도 API에서 기본 화살표 아이콘을 사용하고이 예에서는

here을 찾을 수 있습니다

:

icon: { 
    path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW, 
    scale: 6, 
    rotation: heading 
} 

는 그러나, 나는 내 자신의 사용자 정의 SVG 이미지가은 (일러스트 레이터에서 내 보낸 CS6). 화살표 대신에 사용하고 싶습니다.

icon: { 
    url: 'img/test_dev.svg', 
    size: new google.maps.Size(128, 128), 
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(32, 32), 
    rotation: direction 
} 

이는 SVG 이미지를 보여 주지만, 는가 회전을 적용하지 않는다 :

는 처음에는 약간의 크기가이 같은 특성으로 난 그냥의 SVG 이미지에 URL을 넣을 수 있다고 생각.

커스텀 마커/이미지에 회전을 적용 할 수 없다는 것을 읽었으며 SVG 경로 표기법을 사용해야합니다.

이

<?xml version="1.0" encoding="utf-8"?> 
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="128px" height="128px" viewBox="0 0 595.28 841.89" enable-background="new 0 0 595.28 841.89" xml:space="preserve"> 
<g id="Laag_1"> 
    <g> 
     <defs> 

       <rect id="SVGID_1_" x="-0.001" y="0" transform="matrix(0.7009 0.7133 -0.7133 0.7009 389.2615 -86.391)" width="595.282" height="841.888"/> 
     </defs> 
     <clipPath id="SVGID_2_"> 
      <use xlink:href="#SVGID_1_" overflow="visible"/> 
     </clipPath> 
     <path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M227.617,349.919c39.082-38.405,101.896-37.858,140.301,1.223 
      c38.406,39.081,37.857,101.897-1.224,140.303c-39.081,38.404-101.896,37.855-140.302-1.227 
      C187.987,451.139,188.536,388.325,227.617,349.919"/> 
     <circle clip-path="url(#SVGID_2_)" fill="none" stroke="#1C1C1B" stroke-width="4" cx="297.156" cy="420.682" r="100.212"/> 
     <path clip-path="url(#SVGID_2_)" fill="#FFFFFF" d="M237.552,359.871c33.5-32.92,87.343-32.451,120.261,1.047 
      c32.918,33.498,32.449,87.342-1.051,120.26c-33.497,32.92-87.341,32.449-120.259-1.049 
      C203.583,446.631,204.054,392.788,237.552,359.871"/> 
     <circle clip-path="url(#SVGID_2_)" fill="none" stroke="#1C1C1B" cx="297.157" cy="420.524" r="85.039"/> 
    </g> 

     <text transform="matrix(-0.7032 -0.7156 0.7133 -0.7009 236.9141 485.209)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">O</text> 

     <text transform="matrix(-0.9668 -0.2681 0.2672 -0.9636 276.4443 506.4121)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">P</text> 

     <text transform="matrix(-0.9714 0.2512 -0.2504 -0.9682 322.5098 505.2148)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">A</text> 

     <text transform="matrix(-0.7156 0.7032 -0.7009 -0.7133 360.9883 481.7617)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">L</text> 

     <text transform="matrix(-0.2681 0.9668 -0.9636 -0.2672 383.0596 441.335)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">B</text> 

     <text transform="matrix(0.2512 0.9714 -0.9682 0.2504 382.3613 397.3232)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">I</text> 

     <text transform="matrix(0.7989 0.8129 -0.7133 0.7009 357.1797 355.6123)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">Q</text> 

     <text transform="matrix(0.7156 -0.7032 0.7009 0.7133 233.3838 359.5435)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">T</text> 

     <text transform="matrix(0.2681 -0.9668 0.9636 0.2672 211.2422 400.4873)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">N</text> 

     <text transform="matrix(-0.2512 -0.9714 0.9682 -0.2504 212.1113 443.8857)" fill="#1C1C1B" font-family="'Myriad-Roman'" font-size="11">I</text> 
    <g> 
     <defs> 

       <rect id="SVGID_3_" x="-0.001" y="0" transform="matrix(0.7009 0.7133 -0.7133 0.7009 389.2615 -86.391)" width="595.282" height="841.888"/> 
     </defs> 
     <clipPath id="SVGID_4_"> 
      <use xlink:href="#SVGID_3_" overflow="visible"/> 
     </clipPath> 
     <path clip-path="url(#SVGID_4_)" fill="#BB1321" d="M266.426,392.657c-2.859,10.679-1.167,21.098,0.142,30.658l4.325,4.848 
      c0.036-0.186,0.07-0.373,0.1-0.564c-2.489-9.499,0.299-20.021,8.127-27.008c5.231-4.667,11.773-6.929,18.271-6.856 
      c6.498,0.042,13,2.415,18.149,7.175c7.704,7.123,10.31,17.694,7.653,27.145c0.028,0.191,0.059,0.379,0.091,0.564l4.408-4.77 
      c1.47-9.491,3.36-19.828,0.714-30.503c-5.564-22.452-20.931-46.321-30.431-66.398l-0.001-0.001 
      C288.145,346.81,272.397,370.346,266.426,392.657"/> 
     <path clip-path="url(#SVGID_4_)" fill="none" stroke="#000000" stroke-width="0.25" d="M266.426,392.657 
      c-2.859,10.679-1.167,21.098,0.142,30.658l4.325,4.848c0.036-0.186,0.07-0.373,0.1-0.564c-2.489-9.499,0.299-20.021,8.127-27.008 
      c5.231-4.667,11.773-6.929,18.271-6.856c6.498,0.042,13,2.415,18.149,7.175c7.704,7.123,10.31,17.694,7.653,27.145 
      c0.028,0.191,0.059,0.379,0.091,0.564l4.408-4.77c1.47-9.491,3.36-19.828,0.714-30.503c-5.564-22.452-20.931-46.321-30.431-66.398 
      l-0.001-0.001C288.145,346.81,272.397,370.346,266.426,392.657z"/> 
    </g> 
</g> 
<g id="Layer_2"> 
</g> 
</svg> 

이 Google지도 API 문서 사이트에 존재하는 경로의 예에 비해, 매우 복잡한 것 같다 그래서 다음과 같이 인 이미지의 SVG 경로를 보았다.

계산 순환 게재가 적용된 맞춤 svg 이미지를 표시하려면 무엇을해야합니까?

는 편집 :

나는 2 SVG의 만들었습니다. 원은 이제 SVG 파일입니다. 화살표에 대해 적절한 속성 (색상, 획 등)이있는 SVG 경로 표기법을 사용합니다. 그러나 화살표는 원의 중앙에 있지 않습니다. 바이올린은 여기에 있습니다 : jsfiddle.net/pwadme2y

Answer 1

기호/아이콘 경로는 하나의 SVG 경로 정의 여야합니다. 채우기 색상과 선 (선) 색상이 있습니다. 기호에는 여러 경로와 텍스트 및 클립 경로와 같은 다른 요소가 있습니다.

다행히 AI가 추가하는 클립 경로는 일반적으로 무시할 수 있습니다. 또한 기호의 텍스트가 너무 작아서 실제로 표시되지 않고 제거 될 수 있습니다.

나머지 경로 (화살표와 두 개의 원)를 단일 경로로 병합해야합니다. Illustrator에서이 작업을 수행 할 수 있습니다. 일단 그렇게하면 SVG 파일의 경로 정의를지도 표식 정의로 복사 할 수 있습니다.

그러나 모든 경로를 하나로 병합하면 단색 마커가 붙어 있습니다. 디자인을 하나 이상의 색상으로 유지해야하는 경우 두 개의 마커 (화살표와 원에 각각 하나씩)를 만들어지도 위에 겹쳐서 표시해야합니다.

또 다른 옵션은 SVG를있는 그대로 유지하고 절대 위치 지정을 사용하여 SVG를지도의 올바른 위치에 배치하는 것입니다. 그러나지도를 스크롤하거나 확대 할 때 이동 및 회전에 대한 책임을 져야합니다.