19

CSS を使用して、破線の 2 つの交互の色で線 (または形状の端) を定義することは可能ですか? つまり、1 と 2 が異なる色のピクセルである場合、

1212121212121212 または 112211221122

基本的に、2 つの色で stroke-dasharray を使用する方法が必要です。線自体は完全に着色されています。

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

4

6 に答える 6

33

これは、要素が 1 つだけの SVG では不可能ですが、2 つの異なる四角形を使用して、stroke-dashoffset: x...

rect.stroke-red {
  stroke: red;
  fill: none;
  stroke-width: 5;
}

rect.stroke-green {
  stroke: green;
  fill: none;
  stroke-dasharray: 5,5; 
  stroke-width: 5;
}
<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>

于 2012-09-25T03:48:29.033 に答える
17

@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>

于 2013-03-22T19:29:38.957 に答える
3

一方通行：

<!doctype html>
<html>
	<頭>
		<タイトル></タイトル>
		<スタイル>
div {
	幅: 100px;
	高さ: 100px;
}
.dashbox {
	境界線: 4px 破線の青;
	背景: オレンジ;
}
.dashbox > div {
	背景: 白;
}
		</style>
	</head>
	<本体>
		<div class="dashbox">
			<div></div>
		</div>
	</body>
</html>

つまり、[破線の形で] ある色の要素を別の色の要素の後ろに重ねます。

于 2012-11-17T21:03:46.243 に答える
-3

下部に50のダッシュがある境界線の場合、を増やして50 divを作成margin-leftし、全体のコンテナを。で作成しoverflow:hiddenます。

于 2012-09-30T00:28:57.843 に答える