css - 有没有简单的方法来设置svg路径元素(如带有3d边框的div)的样式？

我的SVG形状上需要3D边框。我的svg是在运行时创建的（使用javascript），并且具有灵活的宽度/高度（没关系）。
当然，它们的形状比下面的示例更复杂。这只是我能想到的最简单的示例，向您展示我正在努力实现的目标。

<div class="sample"></div>

CSS：

.sample {
  width:300px;
  height:150px;
  background-color: red;
  border-radius:20px;
  border: solid 15px green;
  border-top-color: blue;
  border-left-color: blue;
}

不想在此处发布图片，并且没有可用的svg代码，因此这里是用来显示其外观的小提琴：css example

我所有的形状都只包含垂直和水平线（+边界半径）

最佳答案

最重要的是要获得的精确度。如果我们只讨论一个或两个像素的笔划宽度，那就没关系了，但是在下面的示例中，可以看到细节上的差异。

边框的半径并非在所有角上都匹配，并且在正确的位置不会发生颜色变化。填充区域的角不圆角；为此，您必须真正绘制弧线段。

如果您有多个不重叠的路径，则可以将它们分组到一个<g>元素中，然后在<use>元素中仅引用这一组。

path {
    fill: blue;
}
use.upper {
    stroke: red;
    stroke-width: 40;
    stroke-linejoin: round;
}
use.lower {
    stroke: green;
    stroke-width: 20;
    stroke-linejoin: round;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="250">
  <use class="upper" xlink:href="#path1" />
  <use class="lower" xlink:href="#path1" x="10" y="10" />
  <path id="path1" d="M60,60 H160 V120 H240 V200 H60 Z" />
</svg>

对于与精度有关的任何事情，您可能需要计算要在Javascript代码中实现的形式。

看filter effects可能很诱人，但同样，多色边框效果将缺乏精度。对于模糊的阴影效果，它们是一个不错的选择，但对于清晰定义的边框，其性能比使用<use>元素的此技术要差。

关于css - 有没有简单的方法来设置svg路径元素(如带有3d边框的div)的样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/50125162/