带有两种颜色的 SVG/CSS 笔划虚线 - 有可能吗？

Posted 2023-03-06

【中文标题】带有两种颜色的 SVG/CSS 笔划虚线 - 有可能吗？

【英文标题】：SVG/CSS stroke dashed line with two colors - is it possible?

【发布时间】：2012-09-16 11:43:42

【问题描述】：

是否可以使用 CSS 来定义具有两种交替的虚线颜色的线条（或形状边缘）？也就是说，如果1和2是不同颜色的像素，那么

1212121212121212 或 112211221122

我基本上想要一些方法来使用具有两种颜色的stroke-dasharray。线条本身是完全着色的。

如果这是不可能的，有什么好的方法来近似它？例如，我可以创建一个交替使用两种颜色的重复线性渐变，但这很难从 javascript 中设置这两种颜色。

【问题讨论】：

一种方式：webdevout.net/test?01v&raw（即，将一个元素与另一种颜色叠加在另一种颜色之后[以虚线的形式]）

reisio 所说的似乎是迄今为止最好和最安全的答案。如果浏览器做错了什么，Duopixel 的解决方案似乎更有可能搞砸。介意将您的评论转换为答案吗？

【参考方案1】：

这在只有一个元素的 SVG 中是不可能的，但您可以使用两个不同的矩形，然后应用 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"   />
    <rect class="stroke-green" x="10" y="10"   />
</svg>

【讨论】：

您的回答很好，但我会指出，我更喜欢上述评论中的实现 - 虚线矩形后面的实线矩形 - 因为不易出错。如果 CSS 稍微偏离或浏览器在不同位置开始破折号，stroke-dashoffset 似乎会导致看起来很有趣的矩形。

我认为，如果浏览器在不同的地方启动破折号，那是一个浏览器错误，并且如果 CSS 略有偏差，那么 @reisio 的解决方案也会遇到同样的问题。但是，该答案适用于不支持 SVG 的浏览器。

第一个版本实际上更好。 @AndrewMao，将条纹覆盖在实心笔画上会破坏抗锯齿。 jsfiddle.net/rkzpC

【参考方案2】：

基于@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 sn-p 更新：

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>

【讨论】：

非常好的例子。

【参考方案3】：

一种方式：

标题>

分区 
宽度：100px；
高度：100px；

.dashbox 
边框：4px 蓝色虚线；
背景：橙色；

.dashbox > div 
背景：白色；







正文>

【参考方案4】：

这是一个纯 CSS 的解决方案。

<div style="
    margin:1rem;
    width:4rem;
    height:4rem;
    border:5px solid red;
    outline:5px dashed green;
    outline-offset: -5px;"
></div>

【参考方案5】：

一种可能对您有用的方法是在笔划上使用重复的线性渐变。这是一种适用于lines 的解决方法，因为您可以旋转渐变以匹配线条。

对于其他形状 - 它可能有效，但不如破折号数组好。从好的方面来说，它是纯 CSS 的，不需要额外的形状。

Codepen 示例：

https://codepen.io/michbarsinai/pen/YzwXYwg

【参考方案6】：

对于底部有 50 个破折号的边框，创建 50 个 div 并增加 margin-left，并创建一个带有 overflow:hidden 的整体容器。