CSS를 사용하여 점선으로 표시된 두 개의 색상이있는 선 (또는 모양 가장자리)을 정의 할 수 있습니까? 1과 2는두 가지 색상의 SVG/CSS 획선 - 가능합니까?
1212121212121212 또는
112211221122 나는 기본적으로 두 가지 색상으로 뇌졸중 dasharray를 사용하는 몇 가지 방법을 원하는 다음, 다른 색깔의 픽셀 경우 즉,이다. 선 자체가 완전히 색칠되어 있습니다.
이것이 가능하지 않은 경우이를 근사값으로 계산하는 좋은 방법은 무엇입니까? 예를 들어 두 색상이 반복되는 선형 그라디언트를 반복적으로 만들 수 있지만 자바 스크립트에서 두 색상을 설정하기가 어려울 수 있습니다.
이것은 단지 하나 개의 요소와 SVG에 수 없습니다,하지만 당신은 (50)가 테두리를 들어 stroke-dashoffset: x ...
<svg xmlns="http://www.w3.org/2000/svg">
<rect class="stroke-red" x="10" y="10" width="101" height="101" />
<rect class="stroke-green" x="10" y="10" width="101" height="101" />
</svg>
rect.stroke-red {
stroke: red;
fill: none;
stroke-width: 5;
}
rect.stroke-green {
stroke: green;
fill: none;
stroke-dasharray: 5,5;
stroke-width: 5;
}
당신의 대답은 좋지만 위의 설명에서 구현을 선호한다는 점을 지적하겠다 - 오류가 발생하기 쉽도록 점선 직사각형 뒤에있는 실선 사각형. CSS가 약간 꺼져 있거나 브라우저가 다른 장소에서 대시를 시작한 경우 '스트로크 대시 오프셋'이 재미있는 직사각형을 만들 수있는 것처럼 보입니다. –
html 대신 svg를 사용하는 경우 +1 –
브라우저가 브라우저 버그 인 다른 위치에서 대시를 시작하면 CSS가 약간 떨어져있는 경우 @reisio의 해결책과 동일한 문제가 발생할 것이라고 생각합니다. . 그러나 그 대답은 SVG를 지원하지 않는 브라우저에서 작동합니다. –
을 적용 다음 두 가지의 구형을 사용하고 있습니다 아래쪽에 대시가 생기면 margin-left으로 50 div를 만들고 overflow:hidden으로 전체 컨테이너를 만듭니다.
편도
이다<!doctype html>
<html>
<head>
<title></title>
<style>
div {
width: 100px;
height: 100px;
}
.dashbox {
border: 4px dashed blue;
background: orange;
}
.dashbox > div {
background: white;
}
</style>
</head>
<body>
<div class="dashbox">
<div></div>
</div>
</body>
</html>
층 [파선 획의 형태로 다른 색으로 다른 하나 개 뒤에 하나 개 색상 소자. @duopixel의 대답에
건물, 여러 색상으로 상당히 복잡한 패턴을 구축하기 위해 stroke-dasharray 속성을 사용할 수 있습니다 :
.L4 {
stroke: #000;
stroke-dasharray: 20,10,5,5,5,10;
}
.L5 {
stroke: #AAA;
stroke-dasharray: 0,20,10,15,10,0
}
.L6 {
stroke: #DDD;
stroke-dasharray: 0,35,5,15
}
이 http://jsfiddle.net/colin_young/Y38u9/ 보여주는 라인과 복합 대시 패턴으로 원을 참조하십시오. 함께 업데이트
는SO 니펫을 :
svg {
width: 100%;
height: 160px;
}
path, circle {
stroke-width: 4;
}
text {
alignment-baseline: central;
font-family: sans-serif;
font-size: 10px;
stroke-width: 0;
fill: #000;
text-anchor: middle;
}
.dim {
stroke: #AAA;
stroke-width: 1;
stroke-dasharray: 1, 1;
}
circle.dim {
fill: #FFF;
}
.L4 {
stroke: #000;
stroke-dasharray: 20, 10, 5, 5, 5, 10;
}
.L5 {
stroke: #AAA;
stroke-dasharray: 0, 20, 10, 15, 10, 0
}
.L6 {
stroke: #DDD;
stroke-dasharray: 0, 35, 5, 15
}<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g fill="none" stroke="black">
<path class="dim" d="M5 20 l0 80" />
<path class="dim" d="M25 20 l0 80 l-10 20" />
<path class="dim" d="M35 20 l0 80 l-10 30" />
<path class="dim" d="M40 20 l0 120" />
<path class="dim" d="M45 20 l0 80 l10 30" />
<path class="dim" d="M50 20 l0 80 l10 20" />
<path class="dim" d="M60 20 l0 80 l15 10" />
<text x="5" y="110">0</text>
<text x="5" y="125">20</text>
<text x="25" y="135">30</text>
<text x="40" y="150">35</text>
<text x="55" y="140">40</text>
<text x="65" y="125">45</text>
<text x="82" y="115">55</text>
<path class="L4" d="M5 20 l215 0" />
<path class="L5" d="M5 20 l215 0" />
<path class="L6" d="M5 20 l215 0" />
<!-- separated to show composition -->
<text x="5" y="70" style="text-anchor:start">Separated to show composition:</text>
<path class="L4" d="M5 80 l215 0" />
<path class="L5" d="M5 90 l215 0" />
<path class="L6" d="M5 100 l215 0" />
<circle class="L4" cx="400" cy="80" r="60" />
<circle class="L5" cx="400" cy="80" r="60" />
<circle class="L6" cx="400" cy="80" r="60" />
</g>
</svg>
한 가지 방법 : http://www.webdevout.net/test?01v&raw (즉, 다른 뒤에 하나 개의 색상으로, 레이어 하나 개의 요소이다 또 다른 색깔 [점선의 형태로] – reisio
reisio가 지금까지 가장 좋고 안전한 대답 인 것 같습니다. 브라우저가 뭔가 잘못하면 Duopixel의 해결책은 실수에 더 많은 잠재력을 갖고있는 것처럼 보입니다. 당신의 코멘트를 대답으로 바꾸시겠습니까? –