css SVG元素上是否可以有两个笔划？

u4vypkhs 于 2022-11-19 发布在其他

关注(0)|答案(3)|浏览(182)

我有一些SVG元素（矩形）。当我双击这些我添加一个类到矩形。
这堂课是这样的：

.highlighted {
    stroke: green;
    stroke-width : 3px;     
}

基本上是绿色边框。我试过这样的类：

.highlighted {
    border: 3px solid green;
}

但它不工作，因为我工作的SVG不是HTML。
我的问题是，是否可以在一个SVG矩形元素上有多个笔划？

css

来源：https://stackoverflow.com/questions/32394435/is-it-possible-to-have-two-strokes-on-an-svg-element

3条答案

按热度按时间

djmepvbi1#

目前的答案是否定的。
您将需要第二个矩形来创建另一个“笔划”。
但还是有希望的
从W3 spec中提取
SVG 2支持多笔划，我们需要更新措辞来处理这个规范。
至于边框...它们不适用于SVG内部元素，如路径和矩形等....只适用于 full SVG本身。

赞(0）回复(0）举报 2022-11-19

kyks70gy2#

在一个div上可以有多个边框（outline和border），但在SVG上不行。您可以尝试使用多个路径。我的SVG知识非常少，但我认为使用SVG矢量效果应该可以实现这些结果。“矢量效果允许多次应用笔画。”http://dev.w3.org/SVG/modules/vectoreffects/master/SVGVectorEffectsPrimer.html
另外，请阅读以下内容：https://svgwg.org/specs/strokes/#SpecifyingStrokeAlignment

赞(0）回复(0）举报 2022-11-19

sq1bmfud3#

我不知道如何处理矩形元素，但我可以想到处理圆形和椭圆形元素的方法

<svg height="150" width="500">
        <defs>
            <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                <stop offset="0%" style="stop-color:rgb(255,255,255)" />
                <stop offset="20%" style="stop-color:rgb(255,255,255)" />
                <stop offset="20%" style="stop-color:rgb(100,255,255)" />
                <stop offset="40%" style="stop-color:rgb(100,255,255)" />
                <stop offset="40%" style="stop-color:rgb(50,5,255)" />
                <stop offset="60%" style="stop-color:rgb(50,5,255)" />
                <stop offset="60%" style="stop-color:rgb(50,50,25)" />
                <stop offset="80%" style="stop-color:rgb(50,50,25)" />
                <stop offset="80%" style="stop-color:rgb(250,0,0)" />
                <stop offset="100%" style="stop-color:rgb(250,0,0)" />
            </radialGradient>
        </defs>
        <circle cx="70" cy="70" r="55" fill="url(#grad1)" />
        <ellipse cx="250" cy="70" rx="85" ry="55" fill="url(#grad1)" />
    </svg>

赞(0）回复(0）举报 2022-11-19

我来回答

css SVG元素上是否可以有两个笔划？

3条答案

相关问题

热门标签

最新问答