web-dev-qa-db-ja.com

SVG / CSSストロークの2色の破線-可能ですか？

CSSを使用して、破線の2つの交互の色で線（または形状エッジ）を定義することはできますか？つまり、1と2が異なる色のピクセルの場合、

1212121212121212または112211221122

基本的に、2色でストロークダッシュ配列を使用する方法が必要です。ライン自体は完全に色付けされています。

これが不可能な場合、それを概算する良い方法は何ですか？たとえば、2つの色が交互に繰り返される線形グラデーションを作成できますが、JavaScriptから2つの色を設定するのは難しいでしょう。

csscolorssvgline
16
Andrew Mao

これは、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;
}

demo http://jsfiddle.net/aMCsY/

29
methodofaction

@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>
14
Colin Young

一方通行：

<！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つの色で重ね、別の色で重ねます（破線の形）。

3
reisio