SVG单曲角正方形/长方形答案

【问题标题】：SVG single curved corner square / rectangleSVG单曲角正方形/长方形
【发布时间】：2016-07-29 16:34:04
【问题描述】：

我有这个 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"/>

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

我尝试过使用路径，但它们没有意义，长期目标是在循环中显示和隐藏每个矩形，这似乎与路径复杂。

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

【问题讨论】：

我不完全确定是否要使特定的拐角变圆，但我知道要使拐角变圆，您只需将 x 和 y 更改为 rx 和 ry .你也可以试一试d3。我做了一些类似于你解释的事情。

标签： svg

【解决方案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>

【讨论】：