diff options
author | MDN <actions@users.noreply.github.com> | 2021-05-21 00:42:40 +0000 |
---|---|---|
committer | MDN <actions@users.noreply.github.com> | 2021-05-21 00:42:40 +0000 |
commit | 4d3b1c2c79113786e001e3bec551205cd34f818a (patch) | |
tree | fcff970c1fb2155bfcd55f5e2056a79cefd58890 /files/ja/orphaned/web/svg | |
parent | a8cc0431ca75f502b324ec880c62c0f6caf71727 (diff) | |
download | translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.tar.gz translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.tar.bz2 translated-content-4d3b1c2c79113786e001e3bec551205cd34f818a.zip |
[CRON] sync translated content
Diffstat (limited to 'files/ja/orphaned/web/svg')
-rw-r--r-- | files/ja/orphaned/web/svg/element/solidcolor/index.html | 86 |
1 files changed, 86 insertions, 0 deletions
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: <solidcolor> +slug: orphaned/Web/SVG/Element/solidColor +tags: + - Element + - Experimental + - Reference + - SVG +translation_of: Web/SVG/Element/solidColor +original_slug: Web/SVG/Element/solidColor +--- +<div>{{SVGRef}}{{obsolete_header}}</div> + +<p class="seoSummary"><strong><code><solidcolor></code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、 SVG 文書内の複数の場所で使用する単一の色を定義することができます。パレットの色をアニメーションさせるのにも便利です。</p> + +<p class="note"><strong>注:</strong> これは実験的な義jツウであり、まだブラウザーには実装されていません。回避策としては、 {{SVGElement("linearGradient")}} を単一の色経由点で扱うというものがあります。これはあまりすっきりしておらず、 <code><solidcolor></code> とは異なり、それ自身をグラデーションの定義に使用することができません。</p> + +<h2 id="Usage_context" name="Usage_context">使用場面</h2> + +<p>{{svginfo}}</p> + +<h2 id="Attributes" name="Attributes">属性</h2> + +<h3 id="Global_attributes" name="Global_attributes">グローバル属性</h3> + +<ul> + <li><a href="/ja/docs/Web/SVG/Attribute#Core_attributes">コア属性</a></li> + <li><a href="/ja/docs/Web/API/GlobalEventHandlers">グローバルイベント属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li><a href="/en-US/docs/Web/SVG/Attribute#Style_attributes">スタイル属性</a></li> +</ul> + +<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3> + +<p><em>なし。</em></p> + +<h2 id="DOM_interface" name="DOM_interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGSolidcolorElement")}} インターフェイスを実装しています。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html notranslate"><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> +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("svg.elements.solidcolor")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("SVGSolidcolorElement")}}</li> + <li>{{cssxref("solid-color")}}</li> + <li>{{cssxref("solid-opacity")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> |