SVG의 고정 획 너비


103

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 요소의 크기를 조정할 때 축이 더 뚱뚱해지는 것에 관심이 없습니다.

그래서 내가 망했어?

답변:


128

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

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

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


1
불행히도 이것은 XUL 앱에 있으며 아직 벡터 효과를 지원하지 않는 것 같습니다. 오 잘.
wxs 2009-08-20

1
이것은 Firefox 15에 모두 잘 나타나기 때문에 gecko 15에서 XUL 앱을 빌드하면 사용할 수 있습니다.
Robert Longson

2
IE11은 여전히 vector-effect속성을 지원하지 않습니다 . vector-effect: non-scaling-strokeIE11 과 동일한 효과를 얻을 수 있습니까?
멀린

1
@merlin 예, js를 사용하면 IE에서이를 에뮬레이트 할 수 있습니다.
Erik Dahlström

3
@merlin 클론 소자 (설정 fillnone및 그 반대로 용 stroke) 계산 및 설정 적절한 변환 (충전 부분에 대한 하나의 스트로크 부 하나). 확실히 약간 지저분 할 것이지만 거기에 있습니다. Microsoft에 지원을 추가하도록 요청할 수도 있습니다. 어쨌든 나는 당신의 질문이 그 자체로 문제가 될 가치가 있다고 생각합니다.
Erik Dahlström 2014 년
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.