だから、問題は-コンテナのサイズに合うようにsvgアイコンを設定する方法は?残念ながら、サイズを変更せずに切り抜くわけではありません... file-svgスケールの作成方法がわかりません!これは、インラインsvg操作に関する質問ではありません。
div {
width: 50px;
height: 50px;
}
img {
width:100%;
height:100%;
}
<div>
<img src="https://svgshare.com/i/7Bw.svg" viewBox="0 0 10 10" preserveAspectRatio="none">
</div>
後でスケーリングできるようにするviewBox
には、SVG内で定義する必要があります。
img {
width:100%;
height:100%;
}
<div style="width:50px;height:50px;">
<img src="https://svgshare.com/i/7EX.svg">
</div>
<div style="width:100px;height:100px;">
<img src="https://svgshare.com/i/7EX.svg">
</div>
SVGコードは次のとおりです。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 98 98">
<circle class='ui-icon__svg ui-icon__border' cx='50' cy='50' r='48' />
<path class='ui-icon__svg' d='M31.5 42.5V36l45-.1.1 22.6H70m0 6.7H25l-.1-22.7H70v22.7zM36 43.1l.1 22-.1-22zm22.9 0l.1 22-.1-22zm-16.3-6.6l.1 6.1-.1-6.1zm22.9 0l.1 6.1-.1-6.1z' />
</svg>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加