Question

我有这个SVG图像，我想添加弯角。

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="1024px" height="768px" viewBox="0 0 1920 1080" enable-background="new 0 0 1920 1080" xml:space="preserve">

<rect x="0" y="0" fill="#e85c78" width="45" height="45"/>
<rect x="45" y="0" fill="#e2235d" width="45" height="45"/>

<rect x="0" y="45" fill="#75bae5" width="45" height="45"/>
<rect x="45" y="45" fill="#3ca8de" width="45" height="45"/>

<rect x="0" y="90" fill="#fac06b" width="45" height="45"/>
<rect x="45" y="90" fill="#f6b043" width="45" height="45"/>

<rect x="0" y="135" fill="#76b65e" width="45" height="45"/>
<rect x="45" y="135" fill="#3ea73d" width="45" height="45"/>

<rect x="0" y="180" fill="#456b7e" width="45" height="45"/>
<rect x="45" y="180" fill="#0d5065" width="45" height="45"/>

<rect x="32.5" y="225" fill="#d4c8b3" width="12.5" height="100"/>
<rect x="45" y="225" fill="#bfb299" width="12.5" height="100"/>

第一个矩形应该左上角弯曲，第二个矩形应该右上角弯曲，倒数第二个矩形应该左下角弯曲，最后一个矩形应该右下角弯曲。

我尝试过使用路径，但它们没有意义，长期目标是显示并隐藏循环中的每个矩形，这看起来很复杂。

任何人都可以开启单角曲线吗？

Answer 1

您无法控制单个角落的半径。如果您只是使用实心填充的矩形，那么您可以改为绘制圆角矩形并在每个角上放置一个正方形。然后，您可以显示和隐藏这些方块以模拟有和没有舍入的角落：

svg rect { fill: #e85c78; }
svg .A, svg:hover .B { opacity:1; }
svg .B, svg:hover .A { opacity:0; }

<svg width="160" height="160" viewBox="0 0 200 200">
  <rect x="10" y="10" width="140" height="140" rx="50" ry="50"/>
  <rect x="10" y="10" width="50" height="50" class="A"/>
  <rect x="100" y="10" width="50" height="50" class="B"/>
  <rect x="100" y="100" width="50" height="50" class="A"/>
  <rect x="10" y="100" width="50" height="50" class="B"/>
</svg>

SVG单曲角方形/矩形

1 个答案: