次の SVG があります:
<svg>
<g>
<path id="k9ffd8001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="#a0a700"></path>
<path id="kb8000001" d="M64.5 45.5 82.5 45.5 82.5 64.5 64.5 64.5 z" stroke="#808600" stroke-width="0" transform="rotate(0 0 0)" stroke-linecap="square" stroke-linejoin="round" fill-opacity="1" stroke-opacity="1" fill="url(#k9ffb0001)"></path>
</g>
</svg>border-top-right-radiusCSSのような効果を得たいですborder-top-bottom-radius。
角を丸くする効果を実現するにはどうすればよいでしょうか?
ベストアンサー1
SVG パスを使用して角丸四角形を作成する方法は次のとおりです。
<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" />
説明
m100,100: ポイント(100,100)へ移動
h200: 現在地から200ピクセルの水平線を描きます
a20,20 0 0 1 20,20: X 半径 20 ピクセル、Y 半径 20 ピクセルの円弧を時計回りに描き、X 軸と Y 軸の差が 20 ピクセルの点に到達します。
v200: 現在の位置から200ピクセルの垂直線を描きます
a20,20 0 0 1 -20,20: X 軸と Y 軸の半径が 20 ピクセルの円弧を時計回りに描き、X 軸の差が -20 ピクセル、Y 軸の差が 20 ピクセルの点まで描きます。
h-200: 現在地から-200pxの水平線を描きます
a20,20 0 0 1 -20,-20: X 軸と Y 軸の半径が 20 ピクセルの円弧を時計回りに描き、X 軸の差が -20 ピクセル、Y 軸の差が -20 ピクセルの点まで描きます。
v-200: 現在地から-200pxの垂直線を描きます
a20,20 0 0 1 20,-20: 20px X と Y の半径の円弧を時計回りに描き、X 軸の差が 20px、Y 軸の差が -20px の点に到達します。
z: 道を閉ざす
<svg width="440" height="440">
<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="black" stroke-width="3" />
</svg>