SVG の <symbol>
を <use>
で呼び出すには、 <symbol>
と同じ viewBox
を <use>
に記述する必要があります。
これを省略する方法は無いでしょうか?
html
1<svg> 2 <symbol viewBox="0 0 100 100" id="circle1"> 3 <circle cx="50" cy="50" r="50" fill="#ccc" /> 4 </symbol> 5 6 <symbol viewBox="0 0 200 100" id="circle2"> 7 <circle cx="50" cy="50" r="50" fill="#fcc" /> 8 <circle cx="150" cy="50" r="50" fill="#cfc" /> 9 </symbol> 10</svg>
上記のように異なる viewBox
を内包した SVG があります(もっとたくさんあります)。
これらを呼び出すのに各シンボルの viewBox
を確認してるのですが、
量が多いため手間がかかっています。
viewBox
を省略すると縦横比が変わったり、空白ができてしまうので目的を達成できません。
何か良い方法はないでしょうか?
あなたの回答
tips
プレビュー