diff options
Diffstat (limited to 'files/ja/web/svg/element/hatchpath')
| -rw-r--r-- | files/ja/web/svg/element/hatchpath/index.html | 72 |
1 files changed, 72 insertions, 0 deletions
diff --git a/files/ja/web/svg/element/hatchpath/index.html b/files/ja/web/svg/element/hatchpath/index.html new file mode 100644 index 0000000000..0b91496a8d --- /dev/null +++ b/files/ja/web/svg/element/hatchpath/index.html @@ -0,0 +1,72 @@ +--- +title: <hatchpath> +slug: Web/SVG/Element/hatchpath +tags: + - Element + - Experimental + - Filters + - Reference + - SVG +translation_of: Web/SVG/Element/hatchpath +--- +<div>{{SVGRef}}{{SeeCompatTable}}</div> + +<p><strong><code><hatchpath></code></strong> は <a href="/ja/docs/Web/SVG">SVG</a> の要素で、 {{SVGElement("hatch")}} 要素で使用されるハッチパスを定義します。</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/SVG/Attribute#Global_event_attributes">グローバルイベント属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Presentation_attributes">プレゼンテーション属性</a></li> + <li><a href="/ja/docs/Web/SVG/Attribute#Style_attributes">スタイル属性</a></li> +</ul> + +<h3 id="Specific_attributes" name="Specific_attributes">固有の属性</h3> + +<ul> + <li>{{SVGAttr("d")}}</li> + <li>{{SVGAttr("offset")}}</li> +</ul> + +<h2 id="DOM_Interface" name="DOM_Interface">DOM インターフェイス</h2> + +<p>この要素は {{domxref("SVGHatchpathElement")}} インターフェイスを実装しています。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="SVG">SVG</h3> + +<pre class="brush: html; highlight[5] notranslate"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <defs> + <hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5" + rotate="135"> + <hatchpath stroke="#a080ff" stroke-width="2"/> + </hatch> + </defs> + + <rect fill="url(#hatch)" stroke="black" stroke-width="2" + x="10%" y="10%" width="80%" height="80%" /> +</svg></pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", 200, 200)}}</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.hatchpath")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{SVGElement("hatch")}}</li> +</ul> |