<style>

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

<style> の SVG 要素は、スタイルシートを SVG コンテンツ内に直接埋め込むことができるようにします。

メモ: SVG の style 要素には、 HTML の対応する要素（HTML の <style> 要素を参照）と同じ属性があります。

使用コンテキスト

カテゴリー	無し
許可されている内容	あらゆる要素や文字データ

属性

type: この属性は、メディア種別として使用するスタイルシート言語の種類を定義します。値の型: <media-type>; 既定値: text/css; アニメーション: 不可
media: この属性は、スタイルが適用されるメディアを定義します。値の型: <media-query-list>; 既定値: all; アニメーション: 不可
title: この属性は、代替スタイルシートを切り替えるために使用できるスタイルシートの表題です。値の型: <string>; 既定値: none; アニメーション: 不可

DOM インターフェイス

この要素は、 SVGStyleElement インターフェイスを実装しています。

例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      fill: gold;
      stroke: maroon;
      stroke-width: 2px;
    }
  </style>

  <circle cx="5" cy="5" r="4" />
</svg>