目前正在构建一个基于浏览器的SVG应用程序。在这个应用程序中，用户可以设置各种形状的样式和位置，包括矩形。
当我将笔画宽度应用到SVG矩形元素(比如1px)时，不同的浏览器会以不同的方式将笔画应用到矩形的偏移和插入。这被证明是很麻烦的，特别是当我试图计算一个矩形的外部宽度和视觉位置，并将其放置在其他元素旁边时。
例如:
Firefox添加了1px的插入(底部和左侧)和1px的偏移(顶部和右侧) Chrome添加了1px的插入(顶部和左侧)，和1px的偏移(底部和右侧)
到目前为止，我唯一的解决方案是自己绘制实际的边界(可能是用路径工具)，并将边界定位在描边元素的后面。但这种解决方案是一种令人不快的变通方法，如果可能的话，我宁愿不走这条路。
所以我的问题是，你能控制SVG的笔画宽度如何在元素上绘制吗?
当前回答
如上所述，你必须重新计算笔画路径坐标的偏移量，或者将其宽度翻倍，然后掩码一侧或另一侧，因为不仅SVG本身不支持Illustrator的笔画对齐，而且PostScript也不支持。
Adobe PostScript手册第二版中的笔画规范规定: 4.5.1抚摸: 描边操作符沿着当前路径绘制一条一定粗细的线。对于路径中的每个直线或曲线段，笔画一条以该段为中心，两侧平行于该段的直线。”(并强调了这一点)
规范的其余部分没有用于偏移行的位置的属性。当Illustrator让你在内部或外部对齐时，它会重新计算实际路径的偏移量(因为它仍然比套印然后掩蔽计算更便宜)。.ai文档中的路径坐标是引用，而不是被光栅化或导出为最终格式的内容。
因为Inkscape的原生格式是规范SVG，所以它不能提供规范所缺乏的特性。
其他回答
Xavier Ho的解决方案是将笔画宽度增加一倍，并改变着色顺序，尽管只有在填充颜色为纯色且不透明的情况下才有效。
我已经开发了其他方法，更复杂，但适用于任何填充。它也适用于椭圆或路径(后者存在一些具有奇怪行为的角落情况，例如交叉自己的开放路径，但并不多)。
诀窍是在两层中显示形状。一个没有笔画(只有填充)，另一个只有两倍宽度的笔画(透明填充)，并通过一个遮罩，显示整个形状，但隐藏了没有笔画的原始形状。
<svg width="240" height="240" viewBox="0 0 1024 1024">
<defs>
<path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
<mask id="mask">
<use xlink:href="#ld" stroke="#FFFFFF" stroke-width="160" fill="#FFFFFF"/>
<use xlink:href="#ld" fill="#000000"/>
</mask>
</defs>
<g>
<use xlink:href="#ld" fill="#00D2B8"/>
<use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="red" mask="url(#mask)"/>
</g>
</svg>
我发现了一个简单的方法，虽然有一些限制，但对我来说很有效:
在defs中定义形状 定义一个引用形状的剪辑路径 使用它和双重中风与外部是修剪
下面是一个工作示例:
<svg width="240" height="240" viewBox="0 0 1024 1024"> < def > <path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/> < clipPath id =“剪辑”> <使用xlink: href = " # ld " / > < / clipPath > < / def > < g > <使用xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="#00D2B8" clip-path="url(#clip)" / > < / g > < / svg >
一个(肮脏的)可能的解决方案是使用模式，
下面是一个内描边三角形的例子:
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年4月1日被转移到一个全新的规范中，称为SVG笔画。
从2015年2月26日的SVG 2.0编辑稿开始(可能从2月13日开始)，笔画对齐属性的值为inner、center(默认值)和outer。
它的工作方式似乎与@Phrogz提出的笔画位置属性和后来的笔画位置建议相同。这个属性至少从2011年就开始计划了，但除了一个注释说
SVG 2应该包括一种指定笔画位置的方法
在美国，它从未在规范中详细说明，因为它被推迟了——直到现在，似乎是这样。
据我所知，目前还没有浏览器支持这个属性，或者SVG 2的任何新特性，但希望随着规范的成熟，它们很快就会支持。这是我个人一直敦促拥有的特性，我真的很高兴它最终出现在规范中。
似乎有一些问题，关于属性应该如何在开放路径和循环上表现。这些问题很可能会延长跨浏览器的实现。但是，随着浏览器开始支持这个属性，我将用新的信息更新这个答案。
我不知道这有多大帮助，但在我的情况下，我只是创建了另一个圆，只有边界，并将其“在”另一个形状。
