SVG의 고정 획폭

SVG 요소의 획 폭을 "픽셀 인식"으로 설정할 수 있습니다. 적용되는 현재 크기 변환에 관계없이 항상 1 픽셀입니다. SVG의 전체적인 점은 픽셀에 독립적이기 때문에 이것이 불가능할 수도 있다는 것을 알고 있습니다.SVG의 고정 획폭

상황은 다음과 같습니다

나는 그것의 뷰 박스가있는 SVG 요소를 가지고 preserveAspectRatio 속성이 설정되어.

<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 요소를 축척 할 때 더 축 늘어나는 것에 관심이 없다.

그럼 내가 망쳤나요?

출처

2009-08-19 wxs

속성을 non-scaling-stroke으로 설정할 수 있습니다 (the docs 참조). 또 다른 방법은 transform(ref)을 사용하는 것입니다.

오페라 10과 같이 SVG Tiny 1.2에서 지원하는 브라우저에서 작동합니다. 대체로 작은 스크립트를 작성하여 기본적으로 CTM을 뒤집어 크기를 조정하지 않아야하는 요소에 적용합니다 .

선이 더 선명 할 경우 disable antialiasing (shape-rendering=optimizeSpeed 또는 shape-rendering=crispEdges) 또는 위치 지정을 사용하여 재생할 수도 있습니다.

출처

2009-08-20 07:49:17

불행히도 이것은 XUL 응용 프로그램에 있으며, 아직 벡터 효과를 지원하지 않는 것 같습니다. 오 잘. – wxs

이것은 파이어 폭스 15에 모두 잘 나타나기 때문에 Gecko 15에 XUL 응용 프로그램을 빌드하면 사용할 수 있어야합니다. –

IE11은 여전히 '벡터 효과'속성을 지원하지 않습니다. IE11에서 'vector-effect : non-scaling-stroke'와 같은 효과를 얻을 수 있습니까? – merlin

SVG의 고정 획폭

답변

관련 문제