스타일을 다른 화살표와 일치하도록 반복 화살표 SVG 파일 조정

Nov 17 2020

저는 SVG 파일을 사용하여 네덜란드 사람들의 지역 내 마이그레이션 흐름을 묘사하고 있습니다. 지금까지 내가 만든 것은 다음과 같습니다.

여기에서 고리가있는 화살표는 유일한 SVG 이미지이며 다른 화살표는 다른 방법으로 렌더링됩니다. 보시다시피, 고리 모양의 화살표에는 다른 화살표와 달리 검은 색 윤곽선이 없습니다. 화살표의 외곽선 스타일과 색상을 균일하게 만들고 싶습니다.

이를 위해 Billy Ker ( 여기 )와 Simbamangu ( 여기 ) 가 제공 한 SVG 파일의 코드를 조정 해 보았습니다 . 이것은 후자의 코드로, QGIS에서 볼 수 있도록 전자의 크기를 조정합니다.

<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 2.1694 2.1665" xmlns="http://www.w3.org/2000/svg">
     <g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="2.5862">
      <path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81" stop-color="#000000"/>
      <path d="m24.7 0.472-0.434 5.65-5.58-0.401" stop-color="#000000" style="font-variation-settings:normal"/>
     </g>
    </svg>

이것은 루프의 정적 이미지를 렌더링합니다. 동적으로 만들기 위해이 GIS.SE 질문의 정보를 사용 하여 QGIS에서 색상과 윤곽을 수정할 수 있도록했습니다. 조정 된 코드는 다음과 같습니다.

<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 3.1694 3.1665" xmlns="http://www.w3.org/2000/svg">
 <g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="3.0862">
  <path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81" stop-color="#000000" stroke-width="param(outline-width) 50" stroke="param(outline) #000" fill="param(fill) #FFF"/>
  <path d="m24.7 0.472-0.434 5.65-5.58-0.401" stop-color="#000000" fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="param(outline-width) 1"/>
 </g>
</svg>

그러나이 코드는 팔로우 루프를 만듭니다.

그래서 나는

fill="param(fill) #FFF"

다음을 얻기 위해 두 경로의 일부 :

불행히도 이제 더 이상 화살표의 색상을 변경할 수 없습니다. 그래서 대신 코드를 다음과 같이 변경했습니다.

<svg width=".1mm" height=".1mm" version="1.1" viewBox="0 0 3.1694 3.1665" xmlns="http://www.w3.org/2000/svg">
 <g transform="matrix(.1 0 0 .1 .013859 .018301)" fill="none" image-rendering="auto" stroke="#d40000" stroke-width="3.0862">
  <path d="m26.8 13.9a12.8 12.8 0 0 1-10.6 12.6 12.8 12.8 0 0 1-14.3-8.22 12.8 12.8 0 0 1 5.6-15.5 12.8 12.8 0 0 1 16.2 2.81"  stroke="param(outline) #000" stroke-width="param(outline-width) 40"/>
  <path d="m24.7 0.472-0.434 5.65-5.58-0.401" fill="param(fill) #FFF" stroke="param(outline) #000" stroke-width="1"/>
 </g>
</svg>

이것은 다소 낫습니다. 그러나 지금은 획 색상을 검정색으로 변경하면 다음과 같이 표시되기 때문에 여전히 내가 추구하는 것과는 다릅니다.

획 너비를 조정할 수 있지만 화살표의 얇은 외곽선 대신 매우 얇은 화살표가 나타납니다.

내가 원하는 것은 이미지의 다른 (반복되지 않은) 화살표와 비슷하게 보이도록 반복되는 화살표에 대한 코드를 갖는 것입니다. 따라서 바람직하게 루프는 다음과 같습니다.

전체 화살표의 얇은 검은 윤곽선.
화살촉의 크기에 비례하는 수정 가능한 화살 폭.
화살표는 다른 화살표처럼 약간 덜 넓게 시작하여 끝으로 갈수록 조금 더 넓어집니다.

질문 위에 나열된 속성을 충족하는 방식으로 루프 화살표의 SVG 파일 코드를 어떻게 변경할 수 있는지 알고 있습니까? (처음 두 가지 속성이 가장 중요하고 세 번째 속성은 아마도 다소 어렵고 약간 덜 필수적이지만 가지고 있으면 좋을 것입니다.)

답변

2 BillyKerr Nov 17 2020 at 20:51

Inkscape에서는 두 경로를 모두 선택하고 경로> 경로에 대한 스트로크를 수행 할 수 있습니다 .

이렇게하면 획이 채우기를 사용하여 윤곽선으로 변환됩니다.

다음으로 Path> Union을 수행 합니다. 이것은 두 경로를 하나의 솔리드 모양으로 병합하는 부울 연산입니다. 즉, 채우기가있는 단일 닫힌 경로입니다.