SVG의 고정 획 너비

SVG의 고정 획 너비

---

SVG 요소의 획 너비를 "픽셀 인식"으로 설정하고 싶습니다. 현재 적용된 크기 조정 변환에 관계없이 항상 1px 너비입니다. SVG의 모든 요점이 픽셀 독립적이기 때문에 이것이 불가능할 수도 있다는 것을 알고 있습니다.

컨텍스트는 다음과 같습니다.

viewBox 및 preserveAspectRatio 속성이 설정된 SVG 요소가 있습니다. 이렇게 생겼어요

<svg version="1.1" baseProfile="full"
    viewBox="-100 -100 200 200" preserveAspectRatio="xMidYMid meet"
    xmlns="http://www.w3.org/2000/svg" >
</svg>

즉, 해당 요소의 크기를 조정하면 그 안에있는 실제 모양이 그에 따라 크기가 조정됩니다 (지금까지는 훌륭함).

보시다시피 원점이 중앙에 있도록 viewBox를 설정했습니다. 해당 요소 내에 x 축과 y 축을 그리고 싶습니다.

<line x1="-1000" x2="1000" y1="0" y2="0" />

다시 말하지만 이것은 잘 작동합니다. 그러나 이상적으로는이 축의 너비는 항상 1px에 불과합니다. 부모 svg 요소의 크기를 조정할 때 축이 더 뚱뚱해지는 것에 관심이 없습니다.

그래서 내가 망했어?

---

으로 vector-effect설정된 속성을 사용할 수 있습니다 . 문서를non-scaling-stroke 참조하십시오 . 또 다른 방법은 .transform(ref)

예를 들어 Opera 10과 같이 SVG Tiny 1.2의 해당 부분을 지원하는 브라우저에서 작동합니다. 폴백에는 동일한 작업을 수행하는 작은 스크립트를 작성하는 것이 포함됩니다. 기본적으로 CTM을 반전하고 확장되지 않아야하는 요소에 적용합니다.

더 선명한 선을 원하면 앤티 앨리어싱 ( shape-rendering=optimizeSpeed또는 shape-rendering=crispEdges)을 비활성화 하거나 위치 를 조정할 수도 있습니다 .

참고 URL : https://stackoverflow.com/questions/1301685/fixed-stroke-width-in-svg