Wie werden die Abmessungen eines SVG-Kreises richtig eingestellt?

Ich habe Probleme, einen kleinen Kreis in HTML zu implementieren. Ich habe gerade von der SVG erfahren und ich denke, es wird mir erlauben, mein Projekt abzuschließen. Ich bin in der Lage, ein Quadrat von 2 x 2 Pixel mit einem schwarzen Umriss von 1 Pixel ohne Probleme zu zeichnen.Wie werden die Abmessungen eines SVG-Kreises richtig eingestellt?

Das Problem mit dem Kreis ist mit den Abmessungen des Umrisses; Wenn ich den Wert 1 verwende, ist es zu klein, deshalb verwende ich einen Wert von 2 und es sieht gut aus. Aus irgendeinem Grund ist der Radius auch falsch, ich benutze einen Radius von 1,5 mit der Bildgröße von 5 mal 5 Pixel.

Hier ist das gezoomte Bild: Wenn Sie die erste Zeile (erste Tabelle) die Abmessungen von der zweiten Zeile (zweite Tabelle) abweichen, ist dies aufgrund der Abmessungen von 5 x 5 Pixel des Kreises?

Hier ist der Code; Wie repariere ich das?

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 1px; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg height="5" width="5"> 
 
      <circle cx="2.5" cy="2.5" r="1.5" stroke="black" fill="yellow"> 
 
      </circle> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 
<!-- The second table starts here --> 
 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

Quelle

2016-04-03 cronos

Das ist einfach, weil man SVG 'width = "5" hat' und alle anderen haben 'width = "4"'. – Siguza

Sie sind richtig; Also, was ist dein Vorschlag? – cronos

Die width und height Attribute eines Elements, gesetzt, falls unterstützt wird, in der Regel seine Abmessungen in Pixeln.
So Ihr Problem im Wesentlichen darauf zu 5 nicht gleich 4.

sein

Die (meiner Meinung nach) sauberste Weg, dies zu lösen, wäre zu ändern, dass ein SVG Dimensionen zu 4x4 und die Werte in den Kreis Attribute verwendet multiplizieren von 4/5:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 1px; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg height="4" width="4"> 
 
      <circle cx="2" cy="2" r="1.2" stroke="black" fill="yellow"> 
 
      </circle> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 
<!-- The second table starts here --> 
 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

Eine andere Möglichkeit wäre die Verwendung des viewBox Attribut zu machen.
Sie würden die Attribute width und height des betreffenden SVG auf 4 setzen, aber die viewBox auf 0 0 5 5.
Auf diese Weise werden die äußeren Abmessungen 4 mal 4 Pixel, aber Elemente innerhalb der SVG werden skaliert und positioniert, als ob die obere linke Ecke (0,0) und die untere rechte Ecke (5,5) wäre.
Dies hat den Vorteil, dass es leicht skalierbar ist, ohne irgendwelche Proportionen zu stören.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<style> 
 
table, th, td { 
 
    border: 1px solid black; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    padding: 1px; 
 
} 
 

 
</style> 
 
</head> 
 
<body> 
 

 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg height="4" width="4" viewBox="0 0 5 5"> 
 
      <circle cx="2.5" cy="2.5" r="1.5" stroke="black" fill="yellow"> 
 
      </circle> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 
<!-- The second table starts here --> 
 
<table> 
 
<tr> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
    <td valign="middle"> 
 
     <svg width="4" height="4"> 
 
      <rect width="4" height="4" style="fill:rgb(255,255,0);stroke-width:2;stroke:rgb(0,0,0)"> 
 
      </rect> 
 
     </svg> 
 
    </td> 
 
</tr> 
 
</table> 
 

 
</body> 
 
</html>

Quelle

2016-04-03 14:53:55 Siguza

Wenn Sie die Tabellen vergrößern, sehen Sie den Kreis bei 3 und 6 Uhr. – cronos

Sie haben Recht, meine Antwort aktualisiert. – Siguza

Perfekt, ich habe gerade den Radius auf "r = 1.5" geändert und es hat funktioniert! – cronos

Wie werden die Abmessungen eines SVG-Kreises richtig eingestellt?

Antwort

Verwandte Themen