SVGをuseで読み込んだ部分にCSSを適用したい

前提・実現したいこと

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件

CSSの記述に問題があります.

CSS
1.a #none {
2    display: none;
3}

につき, .aクラスの配下にid="none"という要素が存在していない以上, このスタイルが有効となることはありません. use要素はあくまでsymbol要素を参照しているだけであり, symbol要素の中身がコピーされている訳ではないからです.

「use」で読み込んだSVGにはCSSを適用させることは出来ないのでしょうか。

条件付きですが可能です.

ですが, その動作を制御するにはSVGにおけるスタイル付けの優先順位および**use要素の振る舞い**を理解する必要があります.

A. SVGにおけるスタイル付けの優先順位は以下のとおりです.

通常のCSSにおける優先順位(style属性, style要素, !important指定等)
プレゼンテーション属性によるスタイルの指定(fill="red"等)
親要素のスタイル(当該プロパティがinherit値をとりうる場合)

NOTE:
つまりHTMLにおけるスタイル付けの優先順位と全く同じです.

B. use要素はレンダリング上その位置に(仮想的に)g要素/svg要素(symbol要素を参照している場合)が存在しているように振る舞います. (その要素の中にuse要素が参照するノードツリーが存在するように振る舞うのです.)

以上を踏まえた上で, 次のコードを見てみましょう.

HTML
1<svg width="0" height="0">
2	<defs>
3		<symbol id="s" viewBox="0 0 10 10" width="100" height="100">
4			<rect width="5" height="5"/><!--図形a-->
5			<rect x="5" height="5" width="5" height="5" fill="red"/><!--図形b-->
6		</symbol>
7	</defs>
8</svg>
9<svg>
10	<use xlink:href="#s" x="0" width="100" height="100"/><!--use1-->
11	<use xlink:href="#s" x="100" width="100" height="100" style="fill:blue;"/><!--use2-->
12</svg>

ここでは二つのuse要素がsymbol要素#sを参照しており, 片方にはfill="blue"が指定されています. また, symbol要素配下のrect要素の片方にはfill="red"が指定されています.

これをWEBブラウザで表示すると, use2の方の図形aにあたる部分が青く塗りつぶされることになります. この理由は次のとおりです.

use2を描画する際, use2配下にsymbol#sが存在しているものとして扱う.
仮想の図形aを描画する際, 塗りつぶしスタイルfillの値を求める必要がある.
図形aにはスタイルが**未指定(重要)**であるため, inherit値が設定されているものとして扱われるため, 親要素のfill値が参照される.
その際, 仮想の図形a要素の親にuse要素が存在しているので, このuse要素に設定されているfill:blue;が実際の塗りつぶし色として選択される.

かくして, use要素が参照している内容に対しても(use要素を介して間接的に)CSSによるスタイル付けが可能です.

NOTE:
このことから判るように, use要素に対するスタイル指定(単一の値)を内部に伝播する都合上, 複数の塗りつぶし色を外部から与えたいケースには(このままでは)対処できません.

NOTE:
use{display: none;}ではuse要素そのものがレンダリング上存在しないこととなり, グラフィックの一部を消す目的には使えません. 従ってその代替としてfill:noneやfill:transparent, fill:rgba(0,0,0,0)等を用いることになります.

以上を踏まえてもう一度SVGの構造を見直して下さい.

NOTE:
use要素の制御はSVGを扱う上で最も困難な箇所ですので, どうしてもうまく行かない場合は(不本意ながら)use要素の利用を諦めるのも一つの選択肢です.
ブラウザの種類・バージョン毎にuse要素の実装が異なることもあり, SVG単体では対処できないケースもあるからです.

追記)

「#block」の部分だけを「use」で読み込めばいいのかと思いやってみると、

サイズが小さくなってしまいます。

symbol要素を介さず直接図形をuse要素で参照したため, 元の図形のサイズで表示されています.

投稿2018/02/03 08:07

編集2018/02/03 09:25

defghi1977

総合スコア4756

ベストアンサー

id="none"を消すのではなく、id="block"を<symbol>として定義してあげて、id="block"を<use>で呼ぶのはいかがでしょうか。<use> にidなりclassなりをつければ、スタイルを期待通りに適用できるはずです。<symbol id="svg">の中でも<use>で参照できますので、定義は１回で済みます。

html
1<svg style="display:none">
2  <defs>
3    <symbol id="none">
4      <rect width="342" height="342"/>
5    </symbol>
6    <symbol id="block">
7      <polygon points="3,0 0,10 10,6"/>
8    </symbol>
9    <symbol id="svg" viewBox="0 0 10 10">
10      <use xlink:href="#none"/>
11      <use xlink:href="#block" fill="#000"/>
12    </symbol>
13  </defs>
14</svg>
15<div class="a">
16  <svg class="a1" viewBox="0 0 10 10">
17    <use xlink:href="#svg" x="0" y="0"/>
18  </svg>
19  <svg class="a2" viewBox="0 0 10 10">
20    <use xlink:href="#block" x="0" y="0"/>
21  </svg>
22  <svg class="a3" viewBox="0 0 20 20">
23    <use xlink:href="#block" x="0" y="0"/>
24  </svg>
25  <svg class="a4" viewBox="0 0 30 30">
26    <use class="a4-1" xlink:href="#block" x="10" y="10"/>
27    <use class="a4-2" xlink:href="#block" x="0" y="10"/>
28    <use class="a4-3" xlink:href="#block" x="0" y="0"/>
29  </svg>
30</div>

で、たとえば以下のCSSにすると、

css
1.a1 {
2  fill: red;
3}
4.a2 {
5  fill: blue;
6}
7.a3 {
8  fill: green;
9}
10.a4 {
11  fill: purple;
12}
13.a4-2 {
14  fill: gold;
15}
16.a4-3 {
17  fill: gray;
18}

こうなります。

以下で動作確認できます。大きさについてはviewBoxとxとyの指定で解決するのではないかと思います。
https://codepen.io/anon/pen/JpGwZG
Firefox(Win/Mac)、Chrome(Win/Mac)、Safari(Mac)、IE11(Win)、Edge(Win)では、大丈夫でした。

投稿2018/02/03 07:47

編集2018/02/03 09:19