From 4d3b1c2c79113786e001e3bec551205cd34f818a Mon Sep 17 00:00:00 2001 From: MDN Date: Fri, 21 May 2021 00:42:40 +0000 Subject: [CRON] sync translated content --- .../orphaned/web/svg/element/solidcolor/index.html | 86 ++++++++++++++++++++++ 1 file changed, 86 insertions(+) create mode 100644 files/ja/orphaned/web/svg/element/solidcolor/index.html (limited to 'files/ja/orphaned/web/svg') diff --git a/files/ja/orphaned/web/svg/element/solidcolor/index.html b/files/ja/orphaned/web/svg/element/solidcolor/index.html new file mode 100644 index 0000000000..ef66e31943 --- /dev/null +++ b/files/ja/orphaned/web/svg/element/solidcolor/index.html @@ -0,0 +1,86 @@ +--- +title: +slug: orphaned/Web/SVG/Element/solidColor +tags: + - Element + - Experimental + - Reference + - SVG +translation_of: Web/SVG/Element/solidColor +original_slug: Web/SVG/Element/solidColor +--- +
{{SVGRef}}{{obsolete_header}}
+ +

<solidcolor> は SVG の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。

+ +

注: これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 {{SVGElement("linearGradient")}} を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <solidcolor> とは異なり、それ自身をグラデーションの定義に使用することができません。

+ +

使用場面

+ +

{{svginfo}}

+ +

属性

+ +

グローバル属性

+ + + +

固有の属性

+ +

なし。

+ +

DOM インターフェイス

+ +

この要素は {{domxref("SVGSolidcolorElement")}} インターフェイスを実装しています。

+ +

例

+ +

SVG

+ +
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200" height="150">
+  <defs>
+    <!-- solidColor is experimental. -->
+    <solidcolor id="myColor" solid-color="gold" solid-opacity="0.8"/>
+
+    <!-- linearGradient with a single color stop is a less elegant way to
+         achieve the same effect, but it works in current browsers. -->
+    <linearGradient id="myGradient">
+      <stop offset="0" stop-color="green" />
+    </linearGradient>
+  </defs>
+
+  <text x="10" y="20">Circles colored with solidColor</text>
+  <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#myColor)"
+      fill="white"/>
+  <circle cx="50" cy="65" r="35" fill="url(#myColor)"/>
+
+  <text x="10" y="120">Circles colored with linearGradient</text>
+  <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#myGradient)"
+      fill="white"/>
+  <circle cx="50" cy="165" r="35" fill="url(#myGradient)"/>
+</svg>
+
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

ブラウザーの互換性

+ + + +

{{Compat("svg.elements.solidcolor")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf