如何在SVG形状上添加双边框

假设有人要求您在一些随机的几何SVG形状中添加双重边框。由于某种原因，您无法使用任何图形编辑器（需要在运行时生成它们），因此您必须使用CSS或SVG语法中解决它。

您的第一个问题可能是：是否有诸如中风风格的东西：SVG中的Double？好吧，答案还没有，这并不容易。但是无论如何，我都会尝试发现我可以发现哪些方法。我将探索三种不同基本形状的可能性：圆，矩形和多边形。指向可以在两条线的中间保持透明颜色的那些。

扰流板警报：所有结果至少在CSS和SVG中都具有不利影响，但让我介绍您的意图。

简单的解决方案

这些并不能与所有形状一起使用，但它们是最简单的解决方案。

轮廓和盒子阴影

CSS属性概述和盒子阴影仅适用于形状或SVG的边界框，因此两者仅适用于正方形和矩形的绝佳解决方案。它们还可以使用自定义属性允许灵活的颜色。

它仅需使用两条CSS的轮廓线，而且可以使背景颜色通过形状可见。

• ？仅用于一种形状。
• ✅简单的代码
• ✅边界很光滑
• ✅透明背景

盒子阴影只需要一行CSS，但是我们必须确保每个形状都有自己的SVG，因为我们不能直接将盒子阴影直接应用到形状上。要考虑的另一件事是，我们必须在声明中应用背景的颜色。

• ？仅用于一种形状
• ✅简单的代码
• ✅边界很光滑
• ？没有透明背景

SVG梯度

SVG径向梯度仅在圆圈上起作用☺️。我们可以将梯度直接应用于中风，但是最好使用变量，因为我们必须在代码中多次声明颜色。

• ？仅用于一种形状
• ✅简单的代码
• ？边界很光滑
• ？没有透明背景

所有形状的解决方案

这些将与所有形状一起使用，但是代码可能会变成肿或复杂。

过滤器：drop-shadow（）

最后，一个解决所有形状的解决方案！我们必须具有自己的

• ✅所有形状的解决方案
• ✅简单的代码
• ？边界看起来像素化
• ？没有透明背景

SVG过滤器

这是一个非常灵活的解决方案。我们可以创建一个过滤器，并通过SVG的过滤器属性将其添加到形状中。这里复杂的部分是过滤器本身。我们需要三幅画，一幅用于外边界，一幅用于背景洪水，最后一幅用于绘制前面的形状。结果看起来比使用DropShod更好，但是边界仍然是像素化的。

• ✅所有形状的解决方案
• ？复杂代码
• ？边界看起来像素化
• ？没有透明背景

重复形状

这里有几个可能的选项。

选项1：变换

该解决方案需要转换。我们将一个人物放在另一个图形上，其中主人物具有填充的颜色和笔触颜色，而另一个图形没有填充，红色冲程，并缩放并重新定位到中心。我们在上定义了形状。诀窍是将视图框的一半转换为负空间，以便当我们扩展它们时，我们可以从图中的中心进行操作。

• ✅所有形状的解决方案
• ？重复的代码
• ✅边界很光滑
• ✅透明背景

选项2：

我在Doug Schepers的WWW-SVG邮件列表中找到了一个巧妙的解决方案，该解决方案使用SVG 。同样，它需要定义一次形状，并使用两次指它们。这次，主要形状的中风更大。主要形状的第二个ShapeHashalfthestroke，无填充，Anda笔触与背景颜色相匹配。

• ✅所有形状的解决方案
• ？重复的代码
• ✅边界很光滑
• ？没有透明背景

这是完整的结果！

就是这样，您将它们全部放在一个地方。让我知道您可以想到其他可能的解决方案！

以上是如何在SVG形状上添加双边框的详细内容。更多信息请关注PHP中文网其他相关文章！