Question

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

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

jsfidle https://jsfiddle.net/w9s0e3fu/2/

如何确保笔划宽度在整个路径上保持一致？

Answer 1

您的笔划的大小正确，但是被视口切断了。您可以通过添加{{1}和viewBox（即{{1 }}），并且您的路径有left和top，但您的stroke-width中有两半丢失了（包括12/2=6 ）：

width

height

请记住，更改描边粗细将需要更改这些值，因为描边是从线条的中心绘制的，因此，如果线条紧贴视口的侧面，则描边的一半将被切除。如果允许的话，最好创建更多的空间。

Answer 2

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

说明：

m100,100：移至点（100,100）

h200：从我们所在的位置绘制一条200像素的水平线

a20,20 0 0 1 20,20：沿X轴和Y轴以20px X半径，Y半径20px Y半径顺时针绘制一个圆弧到一个点，该点的差值为20px

v200：从我们所在的位置绘制一条200像素的垂直线

a20,20 0 0 1 -20,20：沿顺时针方向绘制X和Y半径为20px的圆弧到X轴上相差-20px且Y轴上相差20px的点

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 >

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>

谢谢！

SVG路径元素圆角厚度

2 个答案: