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

Program / 글쓴이

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

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

답변

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

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

답변

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

답변

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

답변