SVG single gekrümmte Ecke Quadrat/Rechteck

Ich habe dieses SVG-Bild, dem ich gekrümmte Ecken hinzufügen möchte.SVG single gekrümmte Ecke Quadrat/Rechteck

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

Das erste Rechteck die linke obere Ecke gekrümmt haben sollte, sollte das zweite Rechteck die obere rechte Ecke gebogen, sollte der vorletzten Rechteck die linke untere Ecke gekrümmt haben, und das letzte Rechteck sollte die aufweisen untere rechte Ecke gebogen.

Ich habe versucht, mit Pfaden, aber sie machen keinen Sinn, und das lange Ziel ist zeigen und und verstecken Sie jedes Rechteck in einer Schleife, und dies scheint kompliziert mit Pfaden.

Kann jemand einzelne Eckkurven erleuchten?

Quelle

2016-07-29 Udders

Ich bin mir nicht ganz sicher über bestimmte Ecken rund zu machen, aber ich weiß, dass die Ecken rund Sie machen muss nur das 'x' und' y' zu 'rx' und' ry' ändern. Sie könnten auch d3 eine Chance geben. Ich habe etwas getan, was dem ähnlich ist, was du damit erklärst. – tcasey

Sie können den Radius einer einzelnen Ecke nicht steuern. Wenn Sie nur mit voll ausgefüllten Rechtecken arbeiten, können Sie stattdessen ein abgerundetes Rechteck zeichnen und an jeder Ecke ein Quadrat platzieren. Anschließend können Sie zeigen, und diese Quadrate verstecken Ecken zu simulieren mit und ohne Rundung:

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>

Quelle

2016-07-29 16:49:08

SVG single gekrümmte Ecke Quadrat/Rechteck

Antwort

Verwandte Themen