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

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

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

— 사용자 782860
소스

답변:

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

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>모양에 대해 읽어보십시오 .

— Phrogz
소스

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

— Wdebeaum
소스