你能控制SVG的描边宽度的绘制方式吗?

目前正在构建一个基于浏览器的SVG应用程序。在这个应用程序中，用户可以设置各种形状的样式和位置，包括矩形。

当我将笔画宽度应用到SVG矩形元素(比如1px)时，不同的浏览器会以不同的方式将笔画应用到矩形的偏移和插入。这被证明是很麻烦的，特别是当我试图计算一个矩形的外部宽度和视觉位置，并将其放置在其他元素旁边时。

例如:

Firefox添加了1px的插入(底部和左侧)和1px的偏移(顶部和右侧) Chrome添加了1px的插入(顶部和左侧)，和1px的偏移(底部和右侧)

到目前为止，我唯一的解决方案是自己绘制实际的边界(可能是用路径工具)，并将边界定位在描边元素的后面。但这种解决方案是一种令人不快的变通方法，如果可能的话，我宁愿不走这条路。

所以我的问题是，你能控制SVG的笔画宽度如何在元素上绘制吗?

当前回答

更新:笔画对齐属性在2015年4月1日被转移到一个全新的规范中，称为SVG笔画。

从2015年2月26日的SVG 2.0编辑稿开始(可能从2月13日开始)，笔画对齐属性的值为inner、center(默认值)和outer。

它的工作方式似乎与@Phrogz提出的笔画位置属性和后来的笔画位置建议相同。这个属性至少从2011年就开始计划了，但除了一个注释说

SVG 2应该包括一种指定笔画位置的方法

在美国，它从未在规范中详细说明，因为它被推迟了——直到现在，似乎是这样。

据我所知，目前还没有浏览器支持这个属性，或者SVG 2的任何新特性，但希望随着规范的成熟，它们很快就会支持。这是我个人一直敦促拥有的特性，我真的很高兴它最终出现在规范中。

似乎有一些问题，关于属性应该如何在开放路径和循环上表现。这些问题很可能会延长跨浏览器的实现。但是，随着浏览器开始支持这个属性，我将用新的信息更新这个答案。

2015-02-28 22:10:36

其他回答

更新:笔画对齐属性在2015年4月1日被转移到一个全新的规范中，称为SVG笔画。

从2015年2月26日的SVG 2.0编辑稿开始(可能从2月13日开始)，笔画对齐属性的值为inner、center(默认值)和outer。

它的工作方式似乎与@Phrogz提出的笔画位置属性和后来的笔画位置建议相同。这个属性至少从2011年就开始计划了，但除了一个注释说

SVG 2应该包括一种指定笔画位置的方法

在美国，它从未在规范中详细说明，因为它被推迟了——直到现在，似乎是这样。

2015-02-28 22:10:36

一个(肮脏的)可能的解决方案是使用模式，

下面是一个内描边三角形的例子:

https://jsfiddle.net/qr3p7php/5/

<style>
#triangle1{
  fill: #0F0;
  fill-opacity: 0.3;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 20;
}
#triangle2{
  stroke: #f00;
  stroke-opacity: 1;
  stroke-width: 1;
}    
</style>

<svg height="210" width="400" >
    <pattern id="fagl" patternUnits="objectBoundingBox" width="2" height="1" x="-50%">
        <path id="triangle1" d="M150 0 L75 200 L225 200 Z">
    </pattern>    
    <path id="triangle2" d="M150 0 L75 200 L225 200 Z" fill="url(#fagl)"/>
</svg>

2015-06-03 15:46:36

不能，不能指定笔画在元素内部还是外部。我在2003年向SVG工作组提出了这个功能的建议，但是没有得到任何支持(或讨论)。

正如我在提案中提到的，

你可以通过加倍描边宽度来实现与“inside”相同的视觉效果，然后使用剪辑路径将对象剪辑到自身你可以通过将描边宽度加倍，然后将对象的无描边副本叠加在其上，从而获得与“外部”相同的视觉效果。

编辑:这个答案将来可能是错误的。应该可以使用SVG矢量效果来实现这些结果，通过结合veStrokePath与veIntersect(用于“内部”)或与veExclude(用于“外部”)。然而，矢量效果仍然是一个工作草案模块，没有实现，我还能找到。

编辑2:SVG 2规范草案包括一个笔画对齐属性(在可能的值之外的|中有中心|)。这个特性可能最终会被应用到无人机中。

编辑3:有趣而令人失望的是，SVG工作组已经从SVG 2中删除了笔画对齐。您可以在这里看到文章之后描述的一些问题。

2011-09-01 16:26:18

我发现最简单的方法是将clip-path添加到circle中

添加clip-path = "圆()"

然后stroke-width="5"将神奇地变成内5px笔画，绝对半径为100px。

2021-05-08 03:18:15