仅在内部或外部的描边 SVG 路径

Question

考虑 2 个 html svg 路径，一个正方形（类inside）和一个outside具有相同高度的矩形（类）。当我应用时stroke-width: 10px，笔触会5px在内部和5px外部应用。小提琴

我如何只在里面或只在外面抚摸？

.inside { 
  stroke: #333;
  stroke-mode: inside;     // property does not exist
  stroke-width: 5px;
}

.outside {
   stroke: #333;
   stroke-mode: outside;   // property does not exist
   stroke-width: 5px;
}

如果没有这样的属性，是否有解决方法来实现以下目标：

Answer 1

@enxaneta的上述评论是完全正确的。

通常，如果填充的矩形很48px宽并且带有strokea stroke-widthof 12px，则该矩形将显示为：

• 12px宽边框
• 表观宽度为36px

为什么36px而不是48px？

因为12px沿矩形左侧绘制的 宽笔划遮盖了6px矩形，而12px沿矩形右侧绘制的 宽笔划遮盖6px了矩形。

请参阅此示例，其中 的stroke不透明度为 50% - 您可以看到一半与stroke重叠fill：

svg rect {
  x: 10px;
  y: 10px;
  width: 200px;
  height: 100px;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 12px;
  fill: rgb(255, 0, 0);
}

<svg>
  <rect />
</svg>

创建 12px 外边框的解决方案：

要创建外边框，解决方案是先绘制描边，然后在顶部绘制填充。

我们可以使用以下方法来实现这一点：

paint-order: stroke;

现在矩形将显示为：

• 明显的6px宽边框（因为宽边框的一半宽度被顶部的油漆12px遮盖了）fill
• 宽度为48px

paint-order: stroke;

svg rect {
  x: 10px;
  y: 10px;
  width: 200px;
  height: 100px;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 12px;
  fill: rgb(255, 0, 0);
  paint-order: stroke;
}

最后，为了确保矩形显示：

• 12px宽边框
• 宽度为48px

将其stroke-width从更改12px为24px（即预期显示宽度的两倍）：

<svg>
  <rect />
</svg>

svg rect {
  x: 10px;
  y: 10px;
  width: 200px;
  height: 100px;
  stroke: rgb(0, 0, 0);
  stroke-width: 24px;      /* double the intended display width */
  fill: rgb(255, 0, 0);
  paint-order: stroke;
}

创建 12px 内边框的解决方案：

要创建内边框，我们需要三个步骤而不是两个步骤。

前两个步骤很简单：

• 双倍stroke-width（就像外边框一样）
• 使用paint-order: fill（而不是paint-order: stroke）

<svg>
  <rect />
</svg>

svg rect {
  x: 10px;
  y: 10px;
  width: 200px;
  height: 100px;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 24px;      /* double the intended display width */
  fill: rgb(255, 0, 0);
  paint-order: fill;
}

第三步是定义并应用一个<clipPath>与具有内边框的形状完全相同的形状。

例如，如果形状是：

<rect width="200" height="100" />

那么<clipPath>应该是：

<clipPath id="my-clip-path">
  <rect width="200" height="100" /> <!-- Same as the shape -->
</clipPath>

工作示例：

<svg>
  <rect />
</svg>

<rect width="200" height="100" />

所有矩形放在一起：

<clipPath id="my-clip-path">
  <rect width="200" height="100" /> <!-- Same as the shape -->
</clipPath>

#my-rect {
  stroke: rgb(0, 0, 0);
  stroke-width: 24px;
  fill: rgb(255, 0, 0);
  paint-order: fill;
  clip-path: url(#my-clip-path);
}

#my-rect,
#my-clip-path-rect {
  x: 10px;
  y: 10px;
  width: 200px;
  height: 100px;
}

进一步阅读：

• https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/paint-order
• https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order
• https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath
• https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path