SVGは、指定されていないビューボックスを生成しています

Question

SVG再生ボタンを作成しようとしていますが、ボタン自体のサイズだけですが、何らかのビューボックスが自動生成されているようです。このファントムビューボックスは再生ボタンと同じ寸法ではなく、2：1の比率であるようです。

#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>

どのように私は、ビューボックスまたは高さ/幅を指定せずに、SVGのサイズにビューボックスのサイズをすることができますか？

Answer 1

答えは、SVGのデフォルトサイズが300x150で、私にとっては奇妙なようです。

あなたはこのCSSのトリックの記事で説明するようにサイズを指定する必要がありますが、サイジングすることを望んでいない（と、おそらくそのデフォルトに頼るべきではない）場合： https://css-tricks.com/scale-svg/

Answer 2

外SVG要素があります置き換えられた要素。サイズのために何も提供しない場合、デフォルトのwidth which is 300pxとデフォルトの高さが幅の50％になるので、幅の値を指定しなかった場合は150pxになります。

希望する高さと幅を示す方法はいくつかあります。最も明白なのは、heightとwidth属性、または同じ名前のCSSプロパティですが、viewBox属性を使用して幅と高さを定義することもできます。

Answer 3

@RobertLongson's answerは、これがなぜ起こっているのかを説明しています。

circleのr="29.3"は実際にはマークアップで「高さ/幅を指定してください」ということはありません。そこに値を置くことができれば、私はあなたが実際にのsvgの幅または高さで同じ値を想像するでしょう。これを念頭に置いて別のアプローチをとることができます。 viewboxは変更されませんが、0 0 100 100はpolygonのpointsのパーセント値を使用するだけです。それらを計算するために、私はyourpointvalue/yourradiusを実行しました（たとえば、21.9/58.6）。円の要素の代わりにsvgのボーダーを使用すると、軽量化され、読みやすくなります。 CSSで幅を指定しましたが、インラインでも可能です。あなたはまた、唯一の高さを指定、または親、などなどへの、それは相対的な可能性があり

（ブラウザのインス​​ペクタでsvgをチェックすると、あなたはそれが円と同じ幅と高さです表示されます）

#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>

あなたが本当にviewbox、width、またはheightを使用し、すべてのそのマークアップを維持する必要がない場合は、JavaScriptでこれを達成することができます。これはa solution by @Almis（但し、@PaulLeBeau's take on the issue参照）から適合しています。 circleのストロークがsvgの範囲を少し超えて伸びるため、overflow: visibleが必要です。 （最終的にはspecify where a stroke is drawnになるかもしれませんが、まだありません。）

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>