SVG单曲角正方形/长方形

我有这个SVG图像，我想添加弯角。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"/>

第一矩形应具有左上角弯曲，所述第二矩形应该右上角弯曲的，倒数第二个矩形应具有左下角弯曲的，并且最后的矩形应具有右下角弯曲。

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

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

来源

2016-07-29 Udders

我不能完全肯定作出具体边角圆的，但我知道，为了使边角圆你只需要将'x'和'y'改为'rx'和'ry'。你也可以给D3一枪。我做了一些类似于你用它解释的东西。 – tcasey

您无法控制单个拐角的半径。如果你只是用实心矩形工作，那么你可以画一个圆角矩形并在每个角落放置一个正方形。然后，您可以显示和隐藏这些方格来模拟角落，没有四舍五入：

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>

来源

2016-07-29 16:49:08

SVG单曲角正方形/长方形

回答

相关问题