CSSを使用して、破線の2つの交互の色で線(または形状エッジ)を定義することはできますか?つまり、1と2が異なる色のピクセルの場合、
1212121212121212または112211221122
基本的に、2色でストロークダッシュ配列を使用する方法が必要です。ライン自体は完全に色付けされています。
これが不可能な場合、それを概算する良い方法は何ですか?たとえば、2つの色が交互に繰り返される線形グラデーションを作成できますが、JavaScriptから2つの色を設定するのは難しいでしょう。
これは、1つの要素だけのSVGでは不可能ですが、2つの異なる四角形を使用して、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;
}
@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 snippet:
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>
一方通行:
<!doctype html> <html> <head> <title> </ title> <style> div { 幅:100px; 高さ:100px; } 。dashbox { border:4px dashed blue; background:orange; } 。dashbox> div { background:white; } </ style> </ head> <body> <div class = "dashbox"> <div> </ div> </ div> </ body> </ html>
つまり、1つの要素を1つの色で重ね、別の色で重ねます(破線の形)。