Question

我的svg形状上需要一个3d边框。我的svgs是在运行时创建的（在javascript中）并且具有灵活的宽度/高度（应该无关紧要）。当然，它们的形状比下面给出的例子更复杂。这只是我能想到的最简单的例子，向您展示我想要实现的目标。

D E F I
D E F H I
D E G I
D E G H I

的CSS：

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

我不想在这里发布图片，并且没有可用的svg代码，所以这里是显示它应该是什么样子的小提琴：css example

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

Answer 1

最重要的是你想要得到多少。如果我们只讨论一个或两个像素的笔画宽度，那就无所谓了，但在下面的例子中，可以看到细节上的差异。

边框的半径在所有角落都不匹配，并且颜色变化不会在正确的位置发生。填充区域的角不是圆形的;为此你必须真正绘制弧形路径段。

如果您有多个非重叠路径，则可以将它们分组到<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>元素的这种技术更差。

是否有一种简单的方法来设置svg路径元素，如带有3d边框的div？

1 个答案: