스트로크 너비를 설정하는 방법 : SVG 도형의 특정면에만 1을 설정 하시겠습니까?

Question

SVG의 <rect> 요소의 획 폭 : 1을 설정하면 직사각형의 모든면에 선이 배치됩니다.

SVG 사각형의 세면에만 획 폭을 배치하려면 어떻게해야합니까?

Answer 1

SVG에서 단일 모양의 다양한 부분의 비주얼 스타일을 변경할 수 없습니다 (아직 사용 불가능한 Vector Effects 모듈이없는 경우). 대신 획 또는 변형하려는 다른 시각적 스타일에 대해 별도의 모양을 만들어야합니다.

는 특히, 대신 <rect> 또는 <polygon> 요소를 사용하여이 경우에 당신은 만들 수 <path> 또는 유일한 사각형의 세 가지 측면 커버 <polyline> :

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 --> 
<path d="M50,50 L150,50 150,150 50,150" /> 
<polyline points="50,50 150,50 150,150 50,150" /> 

당신이있어 행동에 이들의 효과를 볼 수 있습니다 : http://jsfiddle.net/b5FrF/3/

자세한 내용은

는에 대해 읽어및 더 강력하지만 더 혼란스러운 <path> 모양.

Answer 2

스트로크 된 세면에 폴리 라인을 사용할 수 있으며, 사각형에 획을 전혀 넣지 않아도됩니다. 나는 SVG가 경로/도형의 다른 부분에 다른 스트로크를 적용 할 수 있다고 생각하지 않기 때문에 동일한 효과를 얻기 위해 여러 객체를 사용해야한다.

Answer 3

스트로크 또는 스트로크가 필요한 경우 stroke-dasharray을 사용하여 대시 및 갭을 사각형의 변과 일치시켜이 작업을 수행 할 수도 있습니다.

rect { fill: none; stroke: black; } 
 
.top { stroke-dasharray: 0,50,150 } 
 
.left { stroke-dasharray: 150,50 } 
 
.bottom { stroke-dasharray: 100,50 } 
 
.right { stroke-dasharray: 50,50,100 }

<svg height="300"> 
 
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/> 
 
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/> 
 
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/> 
 
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/> 
 
</svg>

는 jsfiddle를 참조하십시오.