前提・実現したいこと
HTMLに直接埋め込んだインラインSVGスプライトの中のSVGの一部を使用したいのですが、
下記のコードの「#none」の部分を非表示にしようと、
「display:none」をしたのですが消えてくれません。
「#block」の部分だけを「use」で読み込めばいいのかと思いやってみると、
サイズが小さくなってしまいます。
また他の部分でも使用したいため、SVGそのものにスタイルを適用させることは出来ません。
「use」で読み込んだSVGにはCSSを適用させることは出来ないのでしょうか。
詳しい方教えていただけると助かります。
コード
html
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>Document</title> 6<style> 7* { 8 margin: 0; 9 padding: 0; 10} 11.a svg { 12 width: 500px; 13 height: 500px; 14 fill: red; 15} 16.a #none { 17 display: none; 18} 19.a #block { 20 width: 100%; 21 height: 100%; 22} 23#block { 24 fill: #000; 25} 26</style> 27</head> 28<body> 29<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 30 <defs> 31 <symbol id="svg" viewBox="0 0 35 32"> 32 <title>svg</title> 33 <!--この#noneを消したい--> 34 <g id="none"> 35 <rect width="342" height="342"/> 36 </g> 37 <!--この#blockだけを表示したい--> 38 <g id="block"> 39 <polygon points="43.3,0 0,75 86.6,75 "/> 40 </g> 41 </symbol> 42 <!-- 43その他.... 44<symbol viewBox="0 0 35 32">...</symbol> 45... 46--> 47 </defs> 48</svg> 49<div class="a"> 50 <svg> 51 <use xlink:href="#svg"/> 52 </svg> 53 <svg> 54 <use xlink:href="#block"/> 55 </svg> 56</div> 57</body> 58</html>

回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。