SVG erzeugt eine Viewbox, obwohl es keine angegebene

Question

Ich versuche, eine SVG Play-Taste, die nur die Größe der Schaltfläche selbst ist, zu erstellen, aber es scheint, dass eine Art von Viewbox automatisch generiert wird . Diese Phantom-Viewbox hat nicht einmal die gleichen Abmessungen wie die Play-Taste und scheint ein 2: 1-Verhältnis zu sein.

#play-button { 
 
    border: 1px dashed gray; 
 
}

<svg id="play-button"> 
 
<style type="text/css"> 
 
    .st0{fill:none;stroke:#010101;stroke-miterlimit:10;} 
 
    .st1{fill:#010101;} 
 
</style> 
 
<circle id="button-border" class="st0" cx="30" cy="29.9" r="29.3"/> 
 
<polygon id="play-triangle" class="st1" points="21.9,15.7 46.6,29.9 21.9,44.1 "/> 
 
</svg>

Wie kann ich das Sichtgerät auf die Größe der SVG Größe ohne viewBox oder eine Höhe/Breite zu spezifizieren?

Answer 1

Es sieht so aus, als ob die Standardgröße eines SVG 300x150 ist, was mir seltsam vorkommt.

Wenn Sie nicht wollen, dass die Schlichte (und Sie sollten wahrscheinlich nicht auf dieser Standard verlassen) können Sie die Größe angeben müssen, wie in diesem CSS Tricks Artikel beschrieben: https://css-tricks.com/scale-svg/

Answer 2

Das äußere SVG-Element ist ein Element ersetzt. Wenn Sie nichts für die Größe angeben, erhalten Sie den Standardwert width which is 300px und die Standardhöhe, die 50% der Breite beträgt. Wenn Sie also keinen Wert für die Breite angegeben haben, beträgt der Wert 150px.

Es gibt mehrere Möglichkeiten, die gewünschte Höhe und Breite anzugeben. Am offensichtlichsten wären die Attribute height und width oder die gleichnamigen CSS-Eigenschaften. Sie können aber auch ein Attribut viewBox verwenden, um eine Breite und Höhe zu definieren.

Answer 3

@RobertLongson's answer erklärt, warum das passiert. Hier sind einige Dinge, die Sie tun können:

Ihre circle 's r="29.3" in der Tat "eine Höhe/Breite" im Markup angeben. Wenn du dort einen Wert setzen kannst, würde ich dir eigentlich den gleichen Wert in der Svg's Breite oder Höhe vorstellen. Hier ist ein anderer Ansatz, den Sie in Betracht ziehen könnten. Es erfordert eine viewbox aber eine, die sich nicht ändert: 0 0 100 100 lässt uns nur Prozentwerte für die 's points verwenden. Um sie zu berechnen, habe ich Ihren Punktwert/Yourradius (z. B. 21,9/58,6). Das Verwenden eines Randes auf dem svg anstelle eines Kreiselements macht dieses leichter und macht das Markup einfacher zu lesen. Ich habe die Breite im CSS angegeben, aber es könnte auch inline sein; Sie könnten auch nur die Höhe angeben, oder es zu einem übergeordneten Verwandten haben, etc etc.

(Wenn Sie die svg mit Ihrem Browser Inspektor, Sie werden sehen, es ist die gleiche Breite und Höhe wie der Kreis)

#play-button { 
 
    fill: #010101; 
 
    border: 1px solid #000; 
 
    border-radius: 50%; 
 
    display: block; 
 
    
 
    /* specify a width or a height either here or inline */ 
 
    width: 58.6px; 
 
}

<svg id="play-button" viewbox="0 0 100 100"> 
 
    <polygon points="37.3,26.8 79.5,50 37.3,73.2" /> 
 
</svg>

Wenn Sie wirklich nicht viewboxwidth oder height, verwenden können, und alles, was Markup halten müssen, können Sie dies mit Javascript erreichen. Dies ist angepasst von a solution by @Almis (aber siehe @PaulLeBeau's take on the issue). Die overflow: visible ist notwendig, da der Hub der circle ein wenig über die Grenzen der svg hinausgeht. (Schließlich können wir vielleicht specify where a stroke is drawn, aber noch nicht.)

var playButton = document.getElementById('play-button'); 
 
var boundingRect = document.getElementById('button-border').getBoundingClientRect(); 
 
playButton.style.height = boundingRect.height + 'px'; 
 
playButton.style.width = boundingRect.width + 'px';

#play-button { 
 
    border: 1px dashed gray; 
 
    overflow: visible; /* added */ 
 
}

<svg id="play-button"> 
 
    <style type="text/css"> 
 
    .st0 { 
 
     fill: none; 
 
     stroke: #010101; 
 
     stroke-miterlimit: 10; 
 
    } 
 
    .st1 { 
 
     fill: #010101; 
 
    } 
 
    </style> 
 
    <circle id="button-border" class="st0" cx="30" cy="29.9" r="29.3" /> 
 
    <polygon id="play-triangle" class="st1" points="21.9,15.7 46.6,29.9 21.9,44.1 " /> 
 
</svg>