SVG路径元素圆角厚度答案

【问题标题】：SVG path element round corner thicknessSVG路径元素圆角厚度
【发布时间】：2018-10-23 06:18:03
【问题描述】：

我正在尝试使用路径元素创建带圆角的矩形，但问题是圆角的笔划宽度比直线要大。有关路径元素，请参见下面的代码。

<svg width="596.8571428571429" height="403.48571428571427">
    <g class="cardBG" opacity="0.8">
        <path 
            d="M104,0
               h388.8571428571429
               a104,104 0 0 1 104,104
               v195.48571428571427
               v104
               h-104
               h-388.8571428571429
               h-104
               v-104
               v-195.48571428571427
               a104,104 0 0 1 104,-104z" fill="none" 
            stroke="#000000" stroke-width="12">
        </path>
    </g>
</svg>

js文件 https://jsfiddle.net/w9s0e3fu/2/

如何确保整个路径的笔触宽度保持一致？

【问题讨论】：

标签： html svg

【解决方案1】：

您的笔划大小正确，但它被视口截断。您可以通过添加一个viewBox 来扩展您的视口，该left 和top 偏移了您的stroke-width（即12/2=6）的一半，并且有一个width和您路径的height，但包括您的stroke-width 的两半丢失（即2*6=12）：

viewBox="-6 -6 609 416"

<svg width="597" height="404" viewBox="-6 -6 609 416">
    <g class="cardBG" opacity="0.8">
        <path 
            d="M104,0
               h388.8571428571429
               a104,104 0 0 1 104,104
               v195.48571428571427
               v104
               h-104
               h-388.8571428571429
               h-104
               v-104
               v-195.48571428571427
               a104,104 0 0 1 104,-104z" fill="none" 
            stroke="#000000" stroke-width="12">
        </path>
    </g>
</svg>

请记住，更改笔触粗细需要更改这些值，因为笔触是从线条的中心绘制的，因此如果您的线条紧贴视口的一侧，那么一半的笔触将被切断。如果允许，最好创造更多空间。

【讨论】：

【解决方案2】：

我创建了一个完全满足您要求的 svg 路径模式。

说明：

m100,100：移动到点（100,100）

h200：从我们所在的位置画一条 200px 的水平线

a20,20 0 0 1 20,20：绘制一条X半径为20px，Y半径为20px的圆弧，顺时针，到X轴和Y轴相差20px的点

v200：从我们所在的位置画一条 200px 的垂直线

a20,20 0 0 1 -20,20： 顺时针绘制一条 X 轴和 Y 轴半径为 20px 的圆弧，到 X 轴相差 -20px，Y 轴相差 20px 的点 p>

h-200：从我们所在的位置画一条-200px的水平线

a20,20 0 0 1 -20,-20： 顺时针绘制一条 X 和 Y 半径为 20px 的圆弧，到 X 轴差为 -20px，Y 轴差为 -20px 的点

v-200：从我们所在的位置画一条-200px的垂直线

a20,20 0 0 1 20,-20: 顺时针画一条 X 和 Y 半径为 20px 的圆弧，到 X 轴相差 20px，Y 轴相差 -20px 的点 p>

z:关闭路径

<svg width="500" height="500">
  <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="#000000" stroke-width="10"/>
</svg>

<!DOCTYPE html>
<html>
<body>
<svg width="500" height="500">
  <path d="M100,100 h200 a20,20 0 0 1 20,20 v200 a20,20 0 0 1 -20,20 h-200 a20,20 0 0 1 -20,-20 v-200 a20,20 0 0 1 20,-20 z" fill="none" stroke="#000000" stroke-width="10"/>
</svg> 
 
</body>
</html>

谢谢！！

【讨论】：

除了它实际上是一个不同的形状，因为在 OPs 问题中只有两个顶角是圆角的。
是的，@somethinghere，但这是一个常见的解决方案，我认为我们可以轻松解决这个问题 :) 谢谢！！
我认为，如果您还着手解释您做了什么以及为什么这样做，那么 OP 可以从您的答案中学习，而不仅仅是复制粘贴它，这可能是最好的。这个人显然是在尝试使用 SVG，所以告诉他为什么中风会中断以及如何解决它比仅仅发布一个固定版本要好。
看我添加了描述:)
好的，这是一个很好的努力 :) 问题是，我确信 OP 已经知道这些东西，因为他在他的帖子中使用了以上所有内容来说明他试图解决的问题。问题在于 border 以及为什么在他的示例中宽度不一致...我想您只是在视口内重新绘制了形状，但是您的解释都没有试图告诉 OP这就是你的工作的原因。