このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
SVG と CSS
このページでは、グラフィックを作成するための特殊言語であるSVG への CSS の適用について説明します。
以下では、ブラウザーで実行するデモを作成します。
メモ:<use> 要素によって参照される要素は、その要素のスタイルを継承します。したがって、それらに異なるスタイルを適用するには、CSS カスタムプロパティを使用しましょう。
例
プレーンテキストファイルとして新しい SVG 文書doc8.svg を作成してください。ここからコンテンツをコピーして貼り付けてください。スクロールしてすべてを取得するようにしてください。
html
<svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="style8.css" type="text/css" /> <title>SVG のデモ</title> <desc>Mozilla CSS Getting Started - SVG のデモ</desc> <defs> <radialGradient cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> <stop offset="33%" /> <stop offset="95%" /> </radialGradient> </defs> <text x="-280" y="-270">SVG のデモ</text> <text x="-280" y="-250"> マウスポインターを花の上で移動させましょう。 </text> <g> <circle cx="0" cy="0" r="200" stroke="none" fill="url(#fade)" /> <g> <g> <g> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(18)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(36)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(54)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(72)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(90)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(108)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(126)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(144)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(162)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(180)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(198)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(216)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(234)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(252)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(270)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(288)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(306)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(324)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(342)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> </g> <g transform="rotate(9) scale(0.33)"> <g> <g> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(18)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(36)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(54)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(72)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(90)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(108)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(126)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(144)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(162)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(180)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(198)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(216)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(234)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(252)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> <g> <g transform="rotate(270)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(288)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(306)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(324)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g transform="rotate(342)"> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> </g> </g> </g></svg>doc8.svg と同じディレクトリーに新しい CSS ファイルstyle8.css を作成しましょう。ここにあるコンテンツをコピー＆ペーストし、スクロールしてすべて取得するようにしてください。
css
/*** SVG デモ ***//* page */svg { background-color: beige;}#heading { font-size: 24px; font-weight: bold;}#caption { font-size: 12px;}/* flower */#flower:hover { cursor: crosshair;}/* gradient */#fade-stop-1 { stop-color: blue;}#fade-stop-2 { stop-color: white;}/* petals */.segment-fill { fill: var(--segment-fill-fill); stroke: var(--segment-fill-stroke); stroke-width: var(--segment-fill-stroke-width);}.segment-fill:hover { fill: var(--segment-fill-fill-hover); stroke: var(--segment-fill-stroke-hover);}.segment-edge { fill: var(--segment-edge-fill); stroke: var(--segment-edge-stroke); stroke-width: var(--segment-edge-stroke-width);}.segment-edge:hover { stroke: var(--segment-edge-stroke-hover);}/* outer petals */#outer-petals { opacity: 0.75; --segment-fill-fill: azure; --segment-fill-stroke: lightsteelblue; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: deepskyblue; --segment-edge-stroke-width: 3; --segment-fill-fill-hover: plum; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: slateblue;}/* 一部の古いブラウザーで対応している、<use> 要素を介して要素のスタイル設定を 参照する標準的でない方法。*/#outer-petals .segment-fill { fill: azure; stroke: lightsteelblue; stroke-width: 1;}#outer-petals .segment-edge { fill: none; stroke: deepskyblue; stroke-width: 3;}#outer-petals .segment:hover > .segment-fill { fill: plum; stroke: none;}#outer-petals .segment:hover > .segment-edge { stroke: slateblue;}/* inner petals */#inner-petals { --segment-fill-fill: yellow; --segment-fill-stroke: yellow; --segment-fill-stroke-width: 1; --segment-edge-fill: none; --segment-edge-stroke: yellowgreen; --segment-edge-stroke-width: 9; --segment-fill-fill-hover: darkseagreen; --segment-fill-stroke-hover: none; --segment-edge-stroke-hover: green;}/* 一部の古いブラウザーで対応している、<use> 要素を介して要素のスタイル設定を 参照する標準的でない方法。*/#inner-petals .segment-fill { fill: yellow; stroke: yellow; stroke-width: 1;}#inner-petals .segment-edge { fill: none; stroke: yellowgreen; stroke-width: 9;}#inner-petals .segment:hover > .segment-fill { fill: darkseagreen; stroke: none;}#inner-petals .segment:hover > .segment-edge { stroke: green;}SVG 対応のブラウザーでdoc8.svg 文書を開いてください。マウスポインターをグラフィックの上で移動して何が起こるか見てください。
結果
このデモについてのメモです。
SVG 文書は以下の HTML
<link>タグを用いてスタイルシートをリンクしています。html<link rel="stylesheet" href="style8.css" type="text/css" />また、
<style>タグ内の@importルールでリンクすることもできます。html<style> @import "style8.css";</style>SVG は自分自身で CSS プロパティと値を持っています。それらのいくつかは HTML の CSS プロパティと似ています。
練習
外側の花びらが動作する方法は変えずに、内側の花びらのどれかにマウスポインターが重なったときに内側の花びらがすべてピンクになるようにスタイルシートを変更しましょう。
構造の簡略化
上に示した SVG 構造は、<use> 要素を介して花の各部分を参照することで、より簡潔に書くことができます。この動作は標準化されていますが、今のところ<use> 要素で参照される要素に対して:hover 擬似クラスと他の複雑な CSS セレクターに対応しているブラウザーはいくつかしかありません。このような参照する要素にどのようなルールが適用されるかについての課題があります。
そのときの構造は下記をご覧ください。
html
<svg width="600px" height="600px" viewBox="-300 -300 600 600" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" href="style8.css" type="text/css" /> <title>SVG デモ</title> <desc>Mozilla CSS Getting Started - SVG デモ</desc> <defs> <g> <path d="M0,0 v-200 a40,40 0 0,0 -62,10 z" /> <path d="M0,-200 a40,40 0 0,0 -62,10" /> </g> <g> <use href="#segment" /> <use href="#segment" transform="rotate(18)" /> <use href="#segment" transform="rotate(36)" /> <use href="#segment" transform="rotate(54)" /> <use href="#segment" transform="rotate(72)" /> </g> <g> <use href="#quadrant" /> <use href="#quadrant" transform="rotate(90)" /> <use href="#quadrant" transform="rotate(180)" /> <use href="#quadrant" transform="rotate(270)" /> </g> <radialGradient cx="0" cy="0" r="200" gradientUnits="userSpaceOnUse"> <stop offset="33%" /> <stop offset="95%" /> </radialGradient> </defs> <text x="-280" y="-270">SVG のデモ</text> <text x="-280" y="-250"> マウスポインターを花の上で移動させましょう。 </text> <g> <circle cx="0" cy="0" r="200" stroke="none" fill="url(#fade)" /> <use href="#petals" /> <use href="#petals" transform="rotate(9) scale(0.33)" /> </g></svg>次は何か
このデモでは、 SVG 対応ブラウザーは既に SVG 要素の表示方法を知っています。このスタイルシートは特定の方法で表示を変更するだけです。これは HTML 文書にも当てはまります。しかし、要素の表示方法があらかじめ定義されていない汎用の XML 文書には CSS を使用することができます。次のXML の紹介のページでは、これをデモしています。