동적 SVG 그래픽에서 테두리가 일정하지 않음

SVG 파일의 모든 부분을 차지하는 직사각형을 갖고 싶습니다. 또한 테두리 (3px 획 폭)가 있어야합니다. 그래픽의 크기는 "svg"노드의 속성 "width"및 "height"를 변경하여 쉽게 변경할 수 있어야합니다. 나는 다음과 같은 구조를 내놓았다 :동적 SVG 그래픽에서 테두리가 일정하지 않음

<svg width="150" height="35" > 
    <g> 
    <rect 
     id="rect6648" 
     style="fill:#ffffff; fill-opacity:1; stroke:#000000; stroke-width:3;" 
     x="0" 
     y="0" 
     width="100%" 
     height="100%" /> 
    </g> 
</svg>

그러나 그것은 더러운 테두리 다음 이미지를 생성합니다

enter image description here

그것이 가능 :

enter image description here

나는 이런 식으로 뭔가가 필요합니다 조금도? 앞서 언급했듯이 모든 그래픽 크기에서 작동해야합니다.

미리 감사드립니다.

출처

2011-10-20 Andrej

아아, 아니, 적어도 순수하게 선언 SVG와. 모양에 대한 획은 그 모양을 정의하는 기하학적 선의 양면에 그려집니다 (귀하의 경우 양쪽에 1.5가 있습니다). 이 때문에 전체 뷰 박스를 채우는 셰이프가 잘립니다.

어떤 상황에서 이것을 사용하고 있습니까? 당신은 그것을 스크립트 할 수 있어야합니다 : 사각형 세트 x와 y에 대한 스트로크 너비/2, 너비 - 너비 - 스트로크 너비 및 높이 - 높이 - 스트로크 너비로 뷰 보우의 크기를 가져올 수 있어야합니다. 동적 컨텍스트에서 크기를 감지해야 할 수도 있지만 그럴 수도 있습니다.

출처

2011-10-21 12:08:09

감사합니다. 이상적으로 SVG는 모든 클라이언트와 호환되어야합니다. 스크립팅을 사용하고 싶지 않았습니다. – Andrej

당신은 x="0.5" y="0.5" 같은 좌표를 반 픽셀에 ractangle을 배치해야합니다, 그 경계는 흐릿하지 않습니다. 또한 사각형의 CSS에 vector-effect:non-scaling-stroke을 추가하여 확대/축소 수준에 관계없이 테두리가 항상 3px 크기인지 확인하십시오.

출처

2011-11-13 09:40:48

오른쪽 및 아래 부분이 전혀 들어 가지 않기 때문에이 경우 폭과 높이를 "100 %"로 유지할 수 없습니다. – Andrej

동적 SVG 그래픽에서 테두리가 일정하지 않음

답변

관련 문제