SVG 모양의 특정면에만 획 너비 : 1을 설정하는 방법은 무엇입니까?


93

스트로크 너비 설정 : <rect>SVG 의 요소에서 1 은 사각형의 모든면에 스트로크를 배치합니다.

SVG 직사각형의 세면에만 획 너비를 배치하는 방법은 무엇입니까?

답변:


166

스트로크 또는 노 스트로크가 필요한 경우 대시와 간격을 사각형의 측면과 일치시켜 스트로크-다샤 레이 를 사용 하여이를 수행 할 수도 있습니다 .

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을 참조하십시오 .


rect 요소 위에 만 획을 표시하려면 어떻게해야합니까?
Suresh

특정 위치의 특정 숫자가이 효과를주는 이유를 설명해 주시겠습니까?
JacobIRR

@JacobIRR은 'stroke-dasharray'속성의 정의를 참조합니다 (답변에 링크 됨). 여기서 아이디어는 대시 길이를 직사각형의 측면과 일치시키고 대시 간격을 스트로크가 없어야하는 측면과 일치시키는 것입니다.
Erik Dahlström

방금 귀하의 솔루션을 업데이트했습니다.이 링크 codepen.io/shaswatatripathy/pen/oNgPpyd
tripathy

다음 stroke-dasharray은 표시되어야하는 테두리를 정의하는 개체 를 생성하는 프로그래밍 솔루션입니다 . 코드를 읽으면 작동 방식을 이해하는 데 도움이 될 수 있습니다. codepen.io/lazd/pen/WNweNwy?editors=1010
lazd

30

SVG에서 단일 모양의 다양한 부분의 시각적 스타일을 변경할 수 없습니다 (아직 사용할 수없는 벡터 효과 모듈이 없음). 대신 각 획 또는 변경하려는 다른 시각적 스타일에 대해 별도의 모양을 만들어야합니다.

특히이 경우에는 <rect>또는 <polygon>요소를 사용하는 대신 직사각형의 세 면만 덮는 <path>or <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/

세면에 획이있는 빨간색 사각형

자세한 내용은 <polyline>더 강력하지만 더 혼란스러운 <path>모양에 대해 읽어보십시오 .


2

세 개의 획이있는면에 폴리 라인을 사용하고 사각형에 획을 전혀 넣지 않을 수 있습니다. SVG를 사용하면 경로 / 모양의 다른 부분에 다른 획을 적용 할 수 없다고 생각하므로 동일한 효과를 얻으려면 여러 개체를 사용해야합니다.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.