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

Question

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

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

.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，具有stroke 和stroke-width 的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

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;
}

<svg>
  <rect />
</svg>

最后，确保矩形显示为：

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

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

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;
}

<svg>
  <rect />
</svg>

---

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

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

前两个步骤很简单：

• 将stroke-width 加倍（与外边框一样）
• 使用paint-order: fill（而不是paint-order: stroke）

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;
}

<svg>
  <rect />
</svg>

第三步是定义和应用<clipPath>，它完全复制了具有内边框的形状。

例如，如果形状是：

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

那么<clipPath>应该是：

<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;
}

<svg>
  <defs>
    <clipPath id="my-clip-path">
      <rect id="my-clip-path-rect" />
    </clipPath>
  </defs>
  
  <rect id="my-rect" />
</svg>

---

所有矩形加在一起：

svg {
  display: block;
  float: left;
  width: 220px;
  margin-left: 12px;
}

svg:nth-of-type(1) 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:nth-of-type(2) rect {
  x: 10px;
  y: 10px;
  width: 200px;
  height: 100px;
  stroke: rgba(0, 0, 0, 0.5);
  stroke-width: 24px;
  fill: rgb(255, 0, 0);
}

svg:nth-of-type(3) rect {
  x: 10px;
  y: 10px;
  width: 200px;
  height: 100px;
  stroke: rgb(0, 0, 0);
  stroke-width: 24px;
  fill: rgb(255, 0, 0);
  paint-order: stroke;
}

#svg3clip {
  width: 200px;
  height: 100px;
}

svg:nth-of-type(4) rect {
  x: 10px;
  y: 10px;
  width: 200px;
  height: 100px;
  stroke: rgb(0, 0, 0);
  stroke-width: 24px;
  fill: rgb(255, 0, 0);
  paint-order: fill;
  clip-path: url(#svg3clip);
}

<svg>
  <rect />
</svg>

<svg>
  <rect />
</svg>

<svg>
  <defs>
    <clipPath id="svg3clip">
      <rect />
    </clipPath>
  </defs>
  
  <rect />
</svg>

<svg>
  <rect />
</svg>

---

进一步阅读：

• 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