diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:17 -0500 |
| commit | da78a9e329e272dedb2400b79a3bdeebff387d47 (patch) | |
| tree | e6ef8aa7c43556f55ddfe031a01cf0a8fa271bfe /files/ko/web/svg | |
| parent | 1109132f09d75da9a28b649c7677bb6ce07c40c0 (diff) | |
| download | translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.gz translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.tar.bz2 translated-content-da78a9e329e272dedb2400b79a3bdeebff387d47.zip | |
initial commit
Diffstat (limited to 'files/ko/web/svg')
25 files changed, 3262 insertions, 0 deletions
diff --git a/files/ko/web/svg/applying_svg_effects_to_html_content/index.html b/files/ko/web/svg/applying_svg_effects_to_html_content/index.html new file mode 100644 index 0000000000..fc36e06d4c --- /dev/null +++ b/files/ko/web/svg/applying_svg_effects_to_html_content/index.html @@ -0,0 +1,229 @@ +--- +title: HTML 컨텐츠에 SVG 효과 적용하기 +slug: Web/SVG/Applying_SVG_effects_to_HTML_content +tags: + - CSS + - HTML + - SVG + - SVG 효과 + - 가이드 + - 필터 +translation_of: Web/SVG/Applying_SVG_effects_to_HTML_content +--- +<p>모던 브라우저들은 HTML 콘텐트에 그래픽 효과를 적용하기 위해 <a href="/ko/docs/web/CSS" title="Cascading Style Sheets">CSS</a> 스타일 내에 <a href="/ko/docs/Web/SVG">SVG</a>를 사용하는 것을 지원합니다.</p> + +<p>스타일에서의 SVG는, 동일 문서 또는 외부 스타일 시트 어느 쪽에서도 지정할 수 있습니다. 다음 3가지 속성이 사용 가능합니다: <a href="/ko/docs/Web/CSS/mask"><code>mask</code></a>, <a href="/ko/docs/Web/CSS/clip-path"><code>clip-path</code></a>, and <a href="/ko/docs/Web/CSS/filter"><code>filter</code></a>.</p> + +<div class="note"><strong>Note:</strong> 외부 파일에서 SVG를 참조할 때는, 반드시 참조하는 원래 문서와 <a href="/ko/docs/Web/Security/Same-origin_policy">동일한 출처</a>에서 이뤄져야 합니다.</div> + +<h2 id="임베디드_SVG_사용하기">임베디드 SVG 사용하기</h2> + +<p>CSS 스타일을 이용해 SVG 효과를 적용하기 위해서, 먼저 적용할 SVG를 참조하는 CSS 스타일을 작성해야 합니다.</p> + +<pre class="brush: html"><style>p { mask: url(#my-mask); }</style> +</pre> + +<p>위의 예제에서, 모든 문단은 <a href="/ko/docs/Web/HTML/Global_attributes/id">ID</a>가 <code>my-mask</code>인 <a href="/ko/docs/Web/SVG/Element/mask">SVG <code><mask></code></a>에 의해 마스크 처리됩니다.</p> + +<h3 id="Example_Masking">Example: Masking</h3> + +<p>다음의 예는 HTML 문서 내에 CSS 코드와 SVG를 사용해서, HTML 콘텐트에 그래디언트 마스크를 만든 것입니다:</p> + +<pre class="brush: html"><svg height="0"> + <mask id="mask-1"> + <linearGradient id="gradient-1" y2="1"> + <stop stop-color="white" offset="0"/> + <stop stop-opacity="0" offset="1"/> + </linearGradient> + <circle cx="0.25" cy="0.25" r="0.25" id="circle" fill="white"/> + <rect x="0.5" y="0.2" width="300" height="100" fill="url(#gradient-1)"/> + </mask> +</svg> +</pre> + +<pre class="brush: css">.target { + mask: url(#mask-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</pre> + +<p>Note that in the CSS, the mask is specified using a URL to the ID <code>#mask-1</code>, which is the ID of the SVG mask specified below it. Everything else specifies details about the gradient mask itself.</p> + +<p>Applying the SVG effect to (X)HTML is accomplished by assigning the <code>target</code> class defined above to an element, like this:</p> + +<pre class="brush: html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +</pre> + +<p>The above example would be rendered with the mask applied to it.</p> + +<p>{{EmbedLiveSample('Example_Masking', 650, 200)}}</p> + +<h3 id="Example_Clipping">Example: Clipping</h3> + +<p>This example demonstrates using SVG to clip HTML content. Notice that even the clickable areas for links are clipped.</p> + +<pre class="brush: html"><p class="target" style="background:lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> + +<button onclick="toggleRadius()">Toggle radius</button> + +<svg height="0"> + <clipPath id="clipping-path-1" clipPathUnits="objectBoundingBox"> + <circle cx="0.25" cy="0.25" r="0.25" id="circle"/> + <rect x="0.5" y="0.2" width="0.5" height="0.8"/> + </clipPath> +</svg> +</pre> + +<pre class="brush: css">.target { + clip-path: url(#clipping-path-1); +} +p { + width: 300px; + border: 1px solid #000; + display: inline-block; +}</pre> + +<p>This establishes a clipping area made of a circle and rectangle, assigns it the ID <code>#clipping-path-1</code>, then references it in the CSS. The clip path can be assigned to any element with the <code>target</code> class.</p> + +<p>You can make changes to the SVG in real time and see them immediately affect the rendering of the HTML. For example, you can resize the circle in the clip path established above:</p> + +<pre class="brush: js">function toggleRadius() { + var circle = document.getElementById("circle"); + circle.r.baseVal.value = 0.40 - circle.r.baseVal.value; +} +</pre> + +<p>{{EmbedLiveSample('Example_Clipping', 650, 200)}}</p> + +<h3 id="Example_Filtering">Example: Filtering</h3> + +<p>This demonstrates applying a filter to HTML content using SVG. It establishes several filters, which are applied with CSS to three elements in both the normal and mouse <a href="/ko/docs/Web/CSS/:hover">hover</a> states.</p> + +<pre class="brush: html"><p class="target" style="background: lime;"> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua. Ut enim ad minim veniam. +</p> +<pre class="target">lorem</pre> +<p> + Lorem ipsum dolor sit amet, consectetur adipisicing + <b class="target">elit, sed do eiusmod tempor incididunt + ut labore et dolore magna aliqua.</b> + Ut enim ad minim veniam. +</p> +</pre> + +<p>Any SVG filter can be applied this way. For example, to apply a blur effect, you might use:</p> + +<pre class="brush: html"><svg height="0"> + <filter id="f1"> + <feGaussianBlur stdDeviation="3"/> + </filter> +</svg></pre> + +<p>You could also apply a color matrix:</p> + +<pre class="brush: html"><svg height="0"> + <filter id="f2"> + <feColorMatrix values="0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0.3333 0.3333 0.3333 0 0 + 0 0 0 1 0"/> + </filter> +</svg> +</pre> + +<p>And some more filters:</p> + +<pre class="brush: html"><span><svg height="0"> +</span> <filter id="f3"> + <feConvolveMatrix filterRes="100 100" style="color-interpolation-filters:sRGB" + order="3" kernelMatrix="0 -1 0 -1 4 -1 0 -1 0" preserveAlpha="true"/> + </filter> + <filter id="f4"> + <feSpecularLighting surfaceScale="5" specularConstant="1" + specularExponent="10" lighting-color="white"> + <fePointLight x="-5000" y="-10000" z="20000"/> + </feSpecularLighting> + </filter> + <filter id="f5"> + <feColorMatrix values="1 0 0 0 0 + 0 1 0 0 0 + 0 0 1 0 0 + 0 1 0 0 0" style="color-interpolation-filters:sRGB"/> + </filter> +<span></svg></span></pre> + +<p>The five filters are applied using the following CSS:</p> + +<pre class="brush: css">p.target { filter:url(#f3); } +p.target:hover { filter:url(#f5); } +b.target { filter:url(#f1); } +b.target:hover { filter:url(#f4); } +pre.target { filter:url(#f2); } +pre.target:hover { filter:url(#f3); } +</pre> + +<p>{{EmbedLiveSample('Example_Filtering', 650, 200)}}</p> + +<p style="display: none;"><a class="button liveSample" href="/files/3329/filterdemo.xhtml">View this example live</a></p> + +<h3 id="Example_Blurred_Text">Example: Blurred Text</h3> + +<p>In order to blur text, Webkit based browsers have a (prefixed) CSS filter called blur (see also <a href="/ko/docs/Web/CSS/filter#blur%28%29_2">CSS filter</a>). You can achieve the same effect using SVG filters.</p> + +<pre class="brush: html"><p class="blur">Time to clean my glasses</p> +<svg height="0"> + <defs> + <filter id="wherearemyglasses" x="0" y="0"> + <feGaussianBlur in="SourceGraphic" stdDeviation="1"/> + </filter> + </defs> +</svg> +</pre> + +<p>You can apply the SVG and the CSS filter in the same class:</p> + +<pre class="brush: css">.blur { filter: url(#wherearemyglasses); }</pre> + +<p>{{ EmbedLiveSample('Example_Blurred_Text', 300, 100) }}</p> + +<p>Blurring is computation heavy, so ensure to use it sparingly, especially in elements that get scrolled or animated.</p> + +<h2 id="Using_external_references">Using external references</h2> + +<p>SVG used for clipping, masking, and filtering can be loaded from an external source, as long as that source comes from the same origin as the HTML document to which it's applied.</p> + +<p>For example, if your CSS is in a file named <code>default.css</code>, it can look like this:</p> + +<pre class="brush: css" id="line1">.target { clip-path: url(resources.svg#c1); }</pre> + +<p>The SVG is then imported from a file named <code>resources.svg</code>, using the clip path with the ID <code>c1</code>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/ko/docs/SVG" title="SVG">SVG</a></li> + <li><a class="external" href="http://robert.ocallahan.org/2008/06/applying-svg-effects-to-html-content_04.html">SVG Effects for HTML Content</a> (blog post)</li> + <li><del><a class="external" href="/web-tech/2008/10/10/svg-external-document-references">SVG External Document References</a></del> (blog post) (<a href="http://web.archive.org/web/20120512132948/https://developer.mozilla.org/web-tech/2008/10/10/svg-external-document-references/" title="Web Tech Blog » Blog Archive » SVG External Document References">[archive.org] Web Tech Blog » Blog Archive » SVG External Document References</a>)</li> +</ul> diff --git a/files/ko/web/svg/attribute/calcmode/index.html b/files/ko/web/svg/attribute/calcmode/index.html new file mode 100644 index 0000000000..dd2d0424f7 --- /dev/null +++ b/files/ko/web/svg/attribute/calcmode/index.html @@ -0,0 +1,55 @@ +--- +title: calcMode +slug: Web/SVG/Attribute/calcMode +translation_of: Web/SVG/Attribute/calcMode +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>이 속성은 애니메이션의 interpolation 모드를 지정합니다. 기본 모드는 linear 이지만 속성이 linear interpolation을 지원하지 않으면(예: 문자열의 경우) calcMode 속성이 무시되고 discrete interpolation이 사용됩니다. </p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation value attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td>discrete | linear | paced | spline</td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute" title="http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<dl> + <dt>discrete</dt> + <dd>이것은 애니메이션 함수가 interpolation 없이 하나의 값에서 다음 값으로 점프하도록 지정합니다.</dd> + <dt>linear</dt> + <dd>값 사이의 단순한 linear interpolation은 애니메이션 함수를 계산하는데 사용됩니다. {{ SVGElement("animateMotion") }}의 경우를 제외하고는 이것은 기본 값입니다.</dd> + <dt>paced</dt> + <dd>Defines interpolation to produce an even pace of change across the animation. This is only supported for values that define a linear numeric range, and for which some notion of "distance" between points can be calculated (e.g. position, width, height, etc.). If paced is specified, any {{ SVGAttr("keyTimes") }} or {{ SVGAttr("keySplines") }} will be ignored. For {{ SVGElement("animateMotion") }}, this is the default value.</dd> + <dt>spline</dt> + <dd>cubic Bézier spline에 정의된 시간 함수에 따라 {{ SVGAttr("values") }} 목록의 한 값에서 다음 값으로 interpolation 합니다. spline의 점(point)은 {{ SVGAttr("keyTimes") }} 속성에 정의되고, 각 간격의 제어점은 {{ SVGAttr("keySplines") }} 속성에 정의됩니다.</dd> +</dl> + +<h2 id="예제">예제</h2> + +<h2 id="Elements">Elements</h2> + +<p>다음 요소에서 calcMode 속성을 사용할 수 있습니다.</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/ko/web/svg/attribute/cx/index.html b/files/ko/web/svg/attribute/cx/index.html new file mode 100644 index 0000000000..74197f7843 --- /dev/null +++ b/files/ko/web/svg/attribute/cx/index.html @@ -0,0 +1,67 @@ +--- +title: cx +slug: Web/SVG/Attribute/cx +translation_of: Web/SVG/Attribute/cx +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p>{{ SVGElement("circle") }}과 {{ SVGElement("ellipse") }}엘리먼트에서 사용될 경우, 본 속성은 엘리먼트의 중심의 x축의 위치를 나타낸다. 속성이 정의되어있지 않을 경우 속성 값이 "0"일 경우와 동일한 형태를 나타내게 된다.</p> + +<p>{{ SVGElement("radialGradient") }} 엘리먼트의 경우에는 본 속성은 원형 그래디언트의 가장 큰 원의 x축의 위치를 나타낸다. 그래디언트는 가장 큰 원의 둘레와 일치할 수 있도록 그려질것입니다. 속성이 정의되어있지 않을 경우 속성 값이 <strong>50%</strong>일 경우와 동일한 효과를 나타내게 된다.</p> + +<p>Usage context</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Coordinate" title="https://developer.mozilla.org/en/SVG/Content_type#Coordinate"><coordinate></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#CircleElementCXAttribute">SVG 1.1 (2nd Edition): The circle element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute" title="http://www.w3.org/TR/SVG/shapes.html#EllipseElementCXAttribute">SVG 1.1 (2nd Edition): The ellipse element</a><br> + <a class="external" href="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute" title="http://www.w3.org/TR/SVG/pservers.html#RadialGradientElementCXAttribute">SVG 1.1 (2nd Edition): The radialGradient element</a></td> + </tr> + </tbody> +</table> + +<p>{{ page("/en/SVG/Content_type","Coordinate") }}</p> + +<h2 id="예시">예시</h2> + +<pre class="brush: xml"> <svg width="120" height="220" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <style type="text/css" > + + <![CDATA[ + circle.circleClass { + stroke: #006600; + fill: #cc0000; + } + + ]]> + </style> + <circle class="circleClass" cx="40" cy="50" r="26"/> +</svg> +</pre> + +<h2 id="엘리먼트">엘리먼트</h2> + +<p>다음 엘리먼트에서 <code>cx</code>속성을 사용할 수 있습니다.</p> + +<ul> + <li>{{ SVGElement("circle") }}</li> + <li>{{ SVGElement("ellipse") }}</li> + <li>{{ SVGElement("radialGradient") }}</li> +</ul> diff --git a/files/ko/web/svg/attribute/d/index.html b/files/ko/web/svg/attribute/d/index.html new file mode 100644 index 0000000000..19f60cdac9 --- /dev/null +++ b/files/ko/web/svg/attribute/d/index.html @@ -0,0 +1,575 @@ +--- +title: d +slug: Web/SVG/Attribute/d +translation_of: Web/SVG/Attribute/d +--- +<div>{{SVGRef}}</div> + +<p><strong><code>d</code></strong> 속성은 그릴 패스를 정의합니다.</p> + +<p>A path definition is a list of <a href="#Path_commands">path commands</a> where each command is composed of a command letter and numbers that represent the command parameters. The commands are detailed below.</p> + +<p>Three elements have this attribute: {{SVGElement("path")}}, {{SVGElement("glyph")}}, and {{SVGElement("missing-glyph")}}</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" + d="M 10,30 + A 20,20 0,0,1 50,30 + A 20,20 0,0,1 90,30 + Q 90,60 50,90 + Q 10,60 10,30 z" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example', '100%', 200)}}</p> +</div> + +<h2 id="path">path</h2> + +<p>For {{SVGElement('path')}}, <code>d</code> is a string containing a series of path commands that define the path to be drawn.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="glyph">glyph</h2> + +<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('glyph')}} is deprecated and shouldn't be used.</p> + +<p>For {{SVGElement('glyph')}}, <code>d</code> is a string containing a series of path commands that define the outline shape of the glyph.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> The point of origin (the coordinate <code>0</code>,<code>0</code>) is usually the <em>upper left corner</em> of the context. However the {{SVGElement("glyph")}} element has its origin in the <em>bottom left corner</em> of its letterbox.</p> + +<h2 id="missing-glyph">missing-glyph</h2> + +<p class="warning"><strong>Warning:</strong> As of SVG2 {{SVGElement('missing-glyph')}} is deprecated and shouldn't be used.</p> + +<p>For {{SVGElement('missing-glyph')}}, <code>d</code> is a string containing a series of path commands that define the outline shape of the glyph.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Value</th> + <td><strong><a href="/docs/Web/SVG/Content_type#String"><string></a></strong></td> + </tr> + <tr> + <th scope="row">Default value</th> + <td><em>none</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + </tbody> +</table> + +<h2 id="Path_commands">Path commands</h2> + +<p>Path commands are instructions that define a path to be drawn. Each command is composed of a command letter and numbers that represent the command parameters.</p> + +<p>SVG defines 6 types of path commands, for a total of 20 commands:</p> + +<ul> + <li>MoveTo: <code>M</code>, <code>m</code></li> + <li>LineTo: <code>L</code>, <code>l</code>, <code>H</code>, <code>h</code>, <code>V</code>, <code>v</code></li> + <li>Cubic Bézier Curve: <code>C</code>, <code>c</code>, <code>S</code>, <code>s</code></li> + <li>Quadratic Bézier Curve: <code>Q</code>, <code>q</code>, <code>T</code>, <code>t</code></li> + <li>Elliptical Arc Curve: <code>A</code>, <code>a</code></li> + <li>ClosePath: <code>Z</code>, <code>z</code></li> +</ul> + +<p class="note"><strong>Note:</strong> Commands are case-sensitive; an upper-case command specifies its arguments as absolute positions, while a lower-case command specifies points relative to the current position.</p> + +<p>It is always possible to specify a negative value as an argument to a command: negative angles will be anti-clockwise; absolute x and y positions will be taken as negative coordinates; negative relative x values will move to the left; and negative relative y values will move upwards.</p> + +<h3 id="MoveTo_path_commands">MoveTo path commands</h3> + +<p><em>MoveTo</em> instructions can be thought of as picking up the drawing instrument, and setting it down somewhere else, i.e. moving the <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}). There is no line drawn between P<sub>o </sub>and the new <em>current point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">M</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td>Move the <em>current point</em> to the coordinate <code>x</code>,<code>y</code>. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (<code>L</code>) command(s) (<em>see below</em>). Formula: P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">m</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td>Move the <em>current point</em> by shifting the last known position of the path by <code>dx</code> along the x-axis and by <code>dy</code> along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (<code>l</code>) command(s) (<em>see below</em>). Formula: P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td> + </tr> + </tbody> +</table> + +<h4 id="Examples">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <path fill="none" stroke="red" + d="M 10,10 h 10 + m 0,10 h 10 + m 0,10 h 10 + M 40,20 h 10 + m 0,10 h 10 + m 0,10 h 10 + m 0,10 h 10 + M 50,50 h 10 + m-20,10 h 10 + m-20,10 h 10 + m-20,10 h 10" /> +</svg></pre> + +<p>{{EmbedLiveSample('MoveTo_path_commands', '100%', 200)}}</p> + +<h3 id="LineTo_path_commands">LineTo path commands</h3> + +<p><em>LineTo</em> instructions draw a straight line from the <em>current point</em> (P<sub>o</sub>; {x<sub>o</sub>, y<sub>o</sub>}) to the <em>end point</em> (P<sub>n</sub>; {x<sub>n</sub>, y<sub>n</sub>}), based on the parameters specified. The <em>end point </em>(P<sub>n</sub>) then becomes the <em>current point </em>for the next command (P<sub>o</sub><sup>'</sup>).</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">L</th> + <td>(<code>x</code>, <code>y</code>)+</td> + <td>Draw a line from the <em>current point </em>to the <em>end point</em> specified by <code>x</code>,<code>y</code>. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute LineTo (<code>L</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">l</th> + <td>(<code>dx</code>, <code>dy</code>)+</td> + <td>Draw a line from the <em>current point </em>to the <em>end point,</em> which is the <em>current point</em> shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative LineTo (<code>l</code>) command(s) (<em>see below</em>). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td> + </tr> + <tr> + <th scope="row">H</th> + <td><code>x</code>+</td> + <td>Draw a horizontal line from the <em>current point </em>to the <em>end point</em>, which is specified by the <code>x</code> parameter and the <em>current point's</em> y coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit absolute horizontal LineTo (<code>H</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, y<sub>o</sub>}</td> + </tr> + <tr> + <th scope="row">h</th> + <td><code>dx</code>+</td> + <td>Draw a horizontal line from the <em>current point </em>to the <em>end point,</em> which is specified by the <em>current point</em> shifted by <code>dx</code> along the x-axis and the <em>current point's</em> y coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative horizontal LineTo (<code>h</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub>}</td> + </tr> + <tr> + <th scope="row">V</th> + <td><code>y</code>+</td> + <td>Draw a vertical line from the <em>current point </em>to the <em>end point</em>, which is specified by the <code>y</code> parameter and the <em>current point's</em> x coordinate. Any subsequent values are interpreted as parameters for implicit absolute vertical LineTo (<code>V</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">v</th> + <td><code>dy</code>+</td> + <td>Draw a vertical line from the <em>current point </em>to the <em>end point,</em> which is specified by the <em>current point</em> shifted by <code>dy</code> along the y-axis and the <em>current point's</em> x coordinate. Any subsequent value(s) are interpreted as parameter(s) for implicit relative vertical LineTo (<code>v</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o, </sub>y<sub>o</sub> + <code>dy</code>}</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_2">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <!-- LineTo commands with absolute coordinates --> + <path fill="none" stroke="red" + d="M 10,10 + L 90,90 + V 10 + H 50" /> + + <!-- LineTo commands with relative coordinates --> + <path fill="none" stroke="red" + d="M 110,10 + l 80,80 + v -80 + h -40" /> +</svg></pre> + +<p>{{EmbedLiveSample('LineTo_path_commands', '100%', 200)}}</p> + +<h3 id="Cubic_Bézier_Curve">Cubic Bézier Curve</h3> + +<p><em>Cubic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using four points:</p> + +<ul> + <li><em>starting point (current point)</em> (P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</li> + <li><em>end point </em>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</li> + <li><em>start control point </em> (P<sub>cs</sub> = {x<sub>cs</sub>, y<sub>cs</sub>}) (controls curvature near the start of the curve)</li> + <li><em>end control point </em>(P<sub>ce</sub> = {x<sub>ce</sub>, y<sub>ce</sub>}) (controls curvature near the end of the curve).</li> +</ul> + +<p>After drawing, the <em>end point </em>(P<sub>n</sub>) becomes the <em>current point </em>for the next command (P<sub>o</sub>').</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">C</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a cubic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>start control point</em> is specified by <code>x1</code>,<code>y1</code> and the <em>end control point </em>is specified by <code>x2</code>,<code>y2</code><em>.</em> Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute cubic Bézier curve (<code>C</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ; P<sub>cs</sub> = {<code>x1</code>, <code>y1</code>} ; P<sub>ce</sub> = {<code>x2</code>, <code>y2</code>}</td> + </tr> + <tr> + <th scope="row">c</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a cubic Bézier curve from the <em>current point </em>to the <em>end point,</em> which is the <em>current point</em> shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>start control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx1</code> along the x-axis and <code>dy1</code> along the y-axis. The <em>end control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx2</code> along the x-axis and <code>dy2</code> along the y-axis. Any subsequent triplet(s) of coordinate pairs are interpreted as parameter(s) for implicit relative cubic Bézier curve (<code>c</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ; P<sub>cs</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>} ; P<sub>ce</sub> = {x<sub>o</sub> + <code>dx2</code>, y<sub>o</sub> + <code>dy2</code>}</td> + </tr> + <tr> + <th scope="row">S</th> + <td>(<code>x2</code>,<code>y2</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth cubic Bézier curve from the <em>current point </em>to the <em>end point</em> specified by <code>x</code>,<code>y</code>. The <em>end control point</em> is specified by <code>x2</code>,<code>y2</code>. The <em>start control point</em> is a reflection of the <em>end control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>start control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute smooth cubic Bézier curve (<code>S</code>) commands.</td> + </tr> + <tr> + <th scope="row">s</th> + <td>(<code>dx2</code>,<code>dy2</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth cubic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>end control point</em> is the <em>current point</em> (starting point of the curve) shifted by <code>dx2</code> along the x-axis and <code>dy2</code> along the y-axis. The <em>start control point</em> is a reflection of the <em>end control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>start control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative smooth cubic Bézier curve (<code>s</code>) commands.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_3">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Cubic Bézier curve with absolute coordinates --> + <path fill="none" stroke="red" + d="M 10,90 + C 30,90 25,10 50,10 + S 70,90 90,90" /> + + <!-- Cubic Bézier curve with relative coordinates --> + <path fill="none" stroke="red" + d="M 110,90 + c 20,0 15,-80 40,-80 + s 20,80 40,80" /> + + <!-- Highlight the curve vertex and control points --> + <g id="ControlPoints"> + + <!-- First cubic command control points --> + <line x1="10" y1="90" x2="30" y2="90" stroke="lightgrey" /> + <circle cx="30" cy="90" r="1.5"/> + + <line x1="50" y1="10" x2="25" y2="10" stroke="lightgrey" /> + <circle cx="25" cy="10" r="1.5"/> + + <!-- Second smooth command control points (the first one is implicit) --> + <line x1="50" y1="10" x2="75" y2="10" stroke="lightgrey" stroke-dasharray="2" /> + <circle cx="75" cy="10" r="1.5" fill="lightgrey"/> + + <line x1="90" y1="90" x2="70" y2="90" stroke="lightgrey" /> + <circle cx="70" cy="90" r="1.5" /> + + <!-- curve vertex points --> + <circle cx="10" cy="90" r="1.5"/> + <circle cx="50" cy="10" r="1.5"/> + <circle cx="90" cy="90" r="1.5"/> + </g> + <use xlink:href="#ControlPoints" x="100" /> +</svg></pre> + +<p>{{EmbedLiveSample('Cubic_Bézier_Curve', '100%', 200)}}</p> + +<h3 id="Quadratic_Bézier_Curve">Quadratic Bézier Curve</h3> + +<p><em>Quadratic <a href="https://en.wikipedia.org/wiki/Bézier_curve">Bézier curves</a></em> are smooth curve definitions using three points:</p> + +<ul> + <li><em>starting point (current point)</em> (P<sub>o</sub> = {x<sub>o</sub>, y<sub>o</sub>})</li> + <li><em>end point </em>(P<sub>n</sub> = {x<sub>n</sub>, y<sub>n</sub>})</li> + <li><em>control point </em> (P<sub>c</sub> = {x<sub>c</sub>, y<sub>c</sub>}) (controls curvature)</li> +</ul> + +<p> </p> + +<p>After drawing, the <em>end point </em>(P<sub>n</sub>) becomes the <em>current point </em>for the next command (P<sub>o</sub>').</p> + +<p> </p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">Q</th> + <td>(<code>x1</code>,<code>y1</code>, <code>x</code>,<code>y</code>)+</td> + <td>Draw a quadratic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>control point</em> is specified by <code>x1</code>,<code>y1</code>. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit absolute quadratic Bézier curve (<code>Q</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>} ; P<sub>c</sub> = {<code>x1</code>, <code>y1</code>}</td> + </tr> + <tr> + <th scope="row">q</th> + <td>(<code>dx1</code>,<code>dy1</code>, <code>dx</code>,<code>dy</code>)+</td> + <td>Draw a quadratic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>control point </em>is the <em>current point</em> (starting point of the curve) shifted by <code>dx1</code> along the x-axis and <code>dy1</code> along the y-axis. Any subsequent pair(s) of coordinate pairs are interpreted as parameter(s) for implicit relative quadratic Bézier curve (<code>q</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>} ; P<sub>c</sub> = {x<sub>o</sub> + <code>dx1</code>, y<sub>o</sub> + <code>dy1</code>}</td> + </tr> + <tr> + <th scope="row">T</th> + <td>(<code>x</code>,<code>y</code>)+</td> + <td>Draw a smooth quadratic Bézier curve from the <em>current point </em>to the <em>end point </em>specified by <code>x</code>,<code>y</code>. The <em>control point</em> is a reflection of the <em>control point</em> of the previous curve command. If the previous command wasn't a curve, the <em>control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit absolute smooth quadratic Bézier curve (<code>T</code>) command(s). Formula: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {<code>x</code>, <code>y</code>}</td> + </tr> + <tr> + <th scope="row">t</th> + <td>(<code>dx</code>,<code>dy</code>)+</td> + <td>Draw a smooth quadratic Bézier curve from the <em>current point </em>to the <em>end point</em>, which is the <em>current point </em>shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The <em>control point </em>is a reflection of the <em>control point </em>of the previous curve command. If the previous command wasn't a curve, the <em>control point </em>is the same as the curve starting point (<em>current point</em>). Any subsequent coordinate pair(s) are interpreted as parameter(s) for implicit relative smooth quadratic Bézier curve (<code>t</code>) command(s). Formulae: P<sub>o</sub><sup>'</sup> = P<sub>n</sub> = {x<sub>o</sub> + <code>dx</code>, y<sub>o</sub> + <code>dy</code>}</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_4">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + + <!-- Quadratic Bézier curve with implicite repetition --> + <path fill="none" stroke="red" + d="M 10,50 + Q 25,25 40,50 + t 30,0 30,0 30,0 30,0 30,0" /> + + <!-- Highlight the curve vertex and control points --> + <g> + <polyline points="10,50 25,25 40,50" stroke="rgba(0,0,0,.2)" fill="none" /> + <circle cx="25" cy="25" r="1.5" /> + + <!-- curve vertex points --> + <circle cx="10" cy="50" r="1.5"/> + <circle cx="40" cy="50" r="1.5"/> + + <g id="SmoothQuadraticDown"> + <polyline points="40,50 55,75 70,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> + <circle cx="55" cy="75" r="1.5" fill="lightgrey" /> + <circle cx="70" cy="50" r="1.5" /> + </g> + + <g id="SmoothQuadraticUp"> + <polyline points="70,50 85,25 100,50" stroke="rgba(0,0,0,.2)" stroke-dasharray="2" fill="none" /> + <circle cx="85" cy="25" r="1.5" fill="lightgrey" /> + <circle cx="100" cy="50" r="1.5" /> + </g> + + <use xlink:href="#SmoothQuadraticDown" x="60" /> + <use xlink:href="#SmoothQuadraticUp" x="60" /> + <use xlink:href="#SmoothQuadraticDown" x="120" /> + </g> +</svg></pre> + +<p>{{EmbedLiveSample('Quadratic_Bézier_Curve', '100%', 200)}}</p> + +<h3 id="Elliptical_Arc_Curve">Elliptical Arc Curve</h3> + +<p><em>Elliptical arc curves</em> are curves define as a portion of an ellipse. It is sometimes easier than Bézier curve to draw highly regular curves.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">A</th> + <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>x</code> <code>y</code>)+</td> + <td> + <p>Draw an Arc curve from the current point to the coordinate <code>x</code>,<code>y</code>. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p> + + <ul> + <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li> + <li><code>angle</code> represents a rotation (in degree) of the ellipse relative to the x-axis;</li> + <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. + <ul> + <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li> + <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li> + </ul> + </li> + </ul> + The coordinate <code>x</code>,<code>y</code> become the new current point for the next command. All subsequent sets of parameters are considered implicit absolute arc curve (<code>A</code>) commands.</td> + </tr> + <tr> + <th scope="row">a</th> + <td>(<code>rx</code> <code>ry</code> <code>angle</code> <code>large-arc-flag</code> <code>sweep-flag</code> <code>dx</code> <code>dy</code>)+</td> + <td> + <p>Draw an Arc curve from the current point to to a point for which coordinates are those of the current point shifted by <code>dx</code> along the x-axis and <code>dy</code> along the y-axis. The center of the ellipse used to draw the arc is determine automatically based on the other parameters of the command:</p> + + <ul> + <li><code>rx</code> and <code>ry</code> are the two radii of the ellipse;</li> + <li><code>angle</code> represents a rotation (in degree) of the ellipse relative to the x-axis;</li> + <li><code>large-arc-flag</code> and <code>sweep-flag</code> allows to chose which arc must be drawn as 4 possible arcs can be drawn out of the other parameters. + <ul> + <li><code>large-arc-flag</code> allows to chose one of the large arc (<strong>1</strong>) or small arc (<strong>0</strong>),</li> + <li><code>sweep-flag</code> allows to chose one of the clockwise turning arc (<strong>1</strong>) or anticlockwise turning arc (<strong>0</strong>)</li> + </ul> + </li> + </ul> + The current point gets its X and Y coordinates shifted by <code>dx</code> and <code>dy</code> for the next command. All subsequent sets of parameters are considered implicit relative arc curve (<code>a</code>) commands.</td> + </tr> + </tbody> +</table> + +<h4 id="Examples_5">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + + <!-- The influence of the arc flags on which arc is drawn --> + <path fill="none" stroke="red" + d="M 6,10 + A 6 4 10 1 0 14,10" /> + + <path fill="none" stroke="lime" + d="M 6,10 + A 6 4 10 1 1 14,10" /> + + <path fill="none" stroke="purple" + d="M 6,10 + A 6 4 10 0 1 14,10" /> + + <path fill="none" stroke="pink" + d="M 6,10 + A 6 4 10 0 0 14,10" /> +</svg></pre> + +<p>{{EmbedLiveSample('Elliptical_Arc_Curve', '100%', 200)}}</p> + +<h3 id="ClosePath">ClosePath</h3> + +<p><em>ClosePath</em> instructions draw a straight line from the current position, to the first point in the path.</p> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Command</th> + <th scope="col">Parameters</th> + <th scope="col">Notes</th> + </tr> + <tr> + <th scope="row">Z, z</th> + <td> </td> + <td>Close the current subpath by connecting the last point of the path with its initial point. If the two points doesn't have the same coordinates, a straight line is drawn between those two points.</td> + </tr> + </tbody> +</table> + +<p class="note"><strong>Note:</strong> The appearance of a shape closed with closepath may be different to that of one closed by drawing a line to the origin, using one of the other commands, because the line ends are joined together (according to the {{SVGAttr('stroke-linejoin')}} setting), rather than just being placed at the same coordinates.</p> + +<h4 id="Examples_6">Examples</h4> + +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 -1 30 11" xmlns="http://www.w3.org/2000/svg"> + + <!-- + An open shape with the last point of + the path different than the first one + --> + <path stroke="red" + d="M 5,1 + l -4,8 8,0" /> + + <!-- + An open shape with the last point of + the path matching the first one + --> + <path stroke="red" + d="M 15,1 + l -4,8 8,0 -4,-8" /> + + <!-- + An closed shape with the last point of + the path different than the first one + --> + <path stroke="red" + d="M 25,1 + l -4,8 8,0 + z" /> +</svg></pre> + +<p>{{EmbedLiveSample('ClosePath', '100%', 200)}}</p> + +<h2 id="Specification">Specification</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("SVG2", "paths.html#DProperty", "d")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Definition for <code><path></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "fonts.html#GlyphElementDAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><glyph></code> and <code><missing-glyph></code></td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "paths.html#DAttribute", "d")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition for <code><path></code></td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/svg/attribute/index.html b/files/ko/web/svg/attribute/index.html new file mode 100644 index 0000000000..9cdaf4b9ec --- /dev/null +++ b/files/ko/web/svg/attribute/index.html @@ -0,0 +1,461 @@ +--- +title: SVG Attribute reference +slug: Web/SVG/Attribute +tags: + - NeedsHelp + - NeedsTranslation + - SVG + - SVG Attribute + - SVG Reference + - TopicStub +translation_of: Web/SVG/Attribute +--- +<p>« <a href="/en/SVG" title="en/SVG">SVG</a> / <a href="/en/SVG/Element" title="en/SVG/Element">SVG Element reference</a> »</p> + +<h2 id="SVG_Attributes">SVG Attributes</h2> + +<div style="-moz-column-width: 14em; -webkit-columns: 14em; columns: 14em;"> +<h3 id="A">A</h3> + +<ul> + <li>{{ SVGAttr("accent-height") }}</li> + <li>{{ SVGAttr("accumulate") }}</li> + <li>{{ SVGAttr("additive") }}</li> + <li>{{ SVGAttr("alignment-baseline") }}</li> + <li>{{ SVGAttr("allowReorder") }}</li> + <li>{{ SVGAttr("alphabetic") }}</li> + <li>{{ SVGAttr("amplitude") }}</li> + <li>{{ SVGAttr("arabic-form") }}</li> + <li>{{ SVGAttr("ascent") }}</li> + <li>{{ SVGAttr("attributeName") }}</li> + <li>{{ SVGAttr("attributeType") }}</li> + <li>{{ SVGAttr("autoReverse") }}</li> + <li>{{ SVGAttr("azimuth") }}</li> +</ul> + +<h3 id="B">B</h3> + +<ul> + <li>{{ SVGAttr("baseFrequency") }}</li> + <li>{{ SVGAttr("baseline-shift") }}</li> + <li>{{ SVGAttr("baseProfile") }}</li> + <li>{{ SVGAttr("bbox") }}</li> + <li>{{ SVGAttr("begin") }}</li> + <li>{{ SVGAttr("bias") }}</li> + <li>{{ SVGAttr("by") }}</li> +</ul> + +<h3 id="C">C</h3> + +<ul> + <li>{{ SVGAttr("calcMode") }}</li> + <li>{{ SVGAttr("cap-height") }}</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("clip") }}</li> + <li>{{ SVGAttr("clipPathUnits") }}</li> + <li>{{ SVGAttr("clip-path") }}</li> + <li>{{ SVGAttr("clip-rule") }}</li> + <li>{{ SVGAttr("color") }}</li> + <li>{{ SVGAttr("color-interpolation") }}</li> + <li>{{ SVGAttr("color-interpolation-filters") }}</li> + <li>{{ SVGAttr("color-profile") }}</li> + <li>{{ SVGAttr("color-rendering") }}</li> + <li>{{ SVGAttr("contentScriptType") }}</li> + <li>{{ SVGAttr("contentStyleType") }}</li> + <li>{{ SVGAttr("cursor") }}</li> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> +</ul> + +<h3 id="D">D</h3> + +<ul> + <li>{{ SVGAttr("d") }}</li> + <li>{{ SVGAttr("decelerate") }}</li> + <li>{{ SVGAttr("descent") }}</li> + <li>{{ SVGAttr("diffuseConstant") }}</li> + <li>{{ SVGAttr("direction") }}</li> + <li>{{ SVGAttr("display") }}</li> + <li>{{ SVGAttr("divisor") }}</li> + <li>{{ SVGAttr("dominant-baseline") }}</li> + <li>{{ SVGAttr("dur") }}</li> + <li>{{ SVGAttr("dx") }}</li> + <li>{{ SVGAttr("dy") }}</li> +</ul> + +<h3 id="E">E</h3> + +<ul> + <li>{{ SVGAttr("edgeMode") }}</li> + <li>{{ SVGAttr("elevation") }}</li> + <li>{{ SVGAttr("enable-background") }}</li> + <li>{{ SVGAttr("end") }}</li> + <li>{{ SVGAttr("exponent") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> +</ul> + +<h3 id="F">F</h3> + +<ul> + <li>{{ SVGAttr("fill") }}</li> + <li>{{ SVGAttr("fill-opacity") }}</li> + <li>{{ SVGAttr("fill-rule") }}</li> + <li>{{ SVGAttr("filter") }}</li> + <li>{{ SVGAttr("filterRes") }}</li> + <li>{{ SVGAttr("filterUnits") }}</li> + <li>{{ SVGAttr("flood-color") }}</li> + <li>{{ SVGAttr("flood-opacity") }}</li> + <li>{{ SVGAttr("font-family") }}</li> + <li>{{ SVGAttr("font-size") }}</li> + <li>{{ SVGAttr("font-size-adjust") }}</li> + <li>{{ SVGAttr("font-stretch") }}</li> + <li>{{ SVGAttr("font-style") }}</li> + <li>{{ SVGAttr("font-variant") }}</li> + <li>{{ SVGAttr("font-weight") }}</li> + <li>{{ SVGAttr("format") }}</li> + <li>{{ SVGAttr("from") }}</li> + <li>{{ SVGAttr("fx") }}</li> + <li>{{ SVGAttr("fy") }}</li> +</ul> + +<h3 id="G">G</h3> + +<ul> + <li>{{ SVGAttr("g1") }}</li> + <li>{{ SVGAttr("g2") }}</li> + <li>{{ SVGAttr("glyph-name") }}</li> + <li>{{ SVGAttr("glyph-orientation-horizontal") }}</li> + <li>{{ SVGAttr("glyph-orientation-vertical") }}</li> + <li>{{ SVGAttr("glyphRef") }}</li> + <li>{{ SVGAttr("gradientTransform") }}</li> + <li>{{ SVGAttr("gradientUnits") }}</li> +</ul> + +<h3 id="H">H</h3> + +<ul> + <li>{{ SVGAttr("hanging") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("horiz-adv-x") }}</li> + <li>{{ SVGAttr("horiz-origin-x") }}</li> +</ul> + +<h3 id="I">I</h3> + +<ul> + <li>{{ SVGAttr("id") }}</li> + <li>{{ SVGAttr("ideographic") }}</li> + <li>{{ SVGAttr("image-rendering") }}</li> + <li>{{ SVGAttr("in") }}</li> + <li>{{ SVGAttr("in2") }}</li> + <li>{{ SVGAttr("intercept") }}</li> +</ul> + +<h3 id="K">K</h3> + +<ul> + <li>{{ SVGAttr("k") }}</li> + <li>{{ SVGAttr("k1") }}</li> + <li>{{ SVGAttr("k2") }}</li> + <li>{{ SVGAttr("k3") }}</li> + <li>{{ SVGAttr("k4") }}</li> + <li>{{ SVGAttr("kernelMatrix") }}</li> + <li>{{ SVGAttr("kernelUnitLength") }}</li> + <li>{{ SVGAttr("kerning") }}</li> + <li>{{ SVGAttr("keyPoints") }}</li> + <li>{{ SVGAttr("keySplines") }}</li> + <li>{{ SVGAttr("keyTimes") }}</li> +</ul> + +<h3 id="L">L</h3> + +<ul> + <li>{{ SVGAttr("lang") }}</li> + <li>{{ SVGAttr("lengthAdjust") }}</li> + <li>{{ SVGAttr("letter-spacing") }}</li> + <li>{{ SVGAttr("lighting-color") }}</li> + <li>{{ SVGAttr("limitingConeAngle") }}</li> + <li>{{ SVGAttr("local") }}</li> +</ul> + +<h3 id="M">M</h3> + +<ul> + <li>{{ SVGAttr("marker-end") }}</li> + <li>{{ SVGAttr("marker-mid") }}</li> + <li>{{ SVGAttr("marker-start") }}</li> + <li>{{ SVGAttr("markerHeight") }}</li> + <li>{{ SVGAttr("markerUnits") }}</li> + <li>{{ SVGAttr("markerWidth") }}</li> + <li>{{ SVGAttr("mask") }}</li> + <li>{{ SVGAttr("maskContentUnits") }}</li> + <li>{{ SVGAttr("maskUnits") }}</li> + <li>{{ SVGAttr("mathematical") }}</li> + <li>{{ SVGAttr("max") }}</li> + <li>{{ SVGAttr("media") }}</li> + <li>{{ SVGAttr("method") }}</li> + <li>{{ SVGAttr("min") }}</li> + <li>{{ SVGAttr("mode") }}</li> +</ul> + +<h3 id="N">N</h3> + +<ul> + <li>{{ SVGAttr("name") }}</li> + <li>{{ SVGAttr("numOctaves") }}</li> +</ul> + +<h3 id="O">O</h3> + +<ul> + <li>{{ SVGAttr("offset") }}</li> + <li>{{ SVGAttr("onabort") }}</li> + <li>{{ SVGAttr("onactivate") }}</li> + <li>{{ SVGAttr("onbegin") }}</li> + <li>{{ SVGAttr("onclick") }}</li> + <li>{{ SVGAttr("onend") }}</li> + <li>{{ SVGAttr("onerror") }}</li> + <li>{{ SVGAttr("onfocusin") }}</li> + <li>{{ SVGAttr("onfocusout") }}</li> + <li>{{ SVGAttr("onload") }}</li> + <li>{{ SVGAttr("onmousedown") }}</li> + <li>{{ SVGAttr("onmousemove") }}</li> + <li>{{ SVGAttr("onmouseout") }}</li> + <li>{{ SVGAttr("onmouseover") }}</li> + <li>{{ SVGAttr("onmouseup") }}</li> + <li>{{ SVGAttr("onrepeat") }}</li> + <li>{{ SVGAttr("onresize") }}</li> + <li>{{ SVGAttr("onscroll") }}</li> + <li>{{ SVGAttr("onunload") }}</li> + <li>{{ SVGAttr("onzoom") }}</li> + <li>{{ SVGAttr("opacity") }}</li> + <li>{{ SVGAttr("operator") }}</li> + <li>{{ SVGAttr("order") }}</li> + <li>{{ SVGAttr("orient") }}</li> + <li>{{ SVGAttr("orientation") }}</li> + <li>{{ SVGAttr("origin") }}</li> + <li>{{ SVGAttr("overflow") }}</li> + <li>{{ SVGAttr("overline-position") }}</li> + <li>{{ SVGAttr("overline-thickness") }}</li> +</ul> + +<h3 id="P">P</h3> + +<ul> + <li>{{ SVGAttr("panose-1") }}</li> + <li>{{ SVGAttr("paint-order") }}</li> + <li>{{ SVGAttr("pathLength") }}</li> + <li>{{ SVGAttr("patternContentUnits") }}</li> + <li>{{ SVGAttr("patternTransform") }}</li> + <li>{{ SVGAttr("patternUnits") }}</li> + <li>{{ SVGAttr("pointer-events") }}</li> + <li>{{ SVGAttr("points") }}</li> + <li>{{ SVGAttr("pointsAtX") }}</li> + <li>{{ SVGAttr("pointsAtY") }}</li> + <li>{{ SVGAttr("pointsAtZ") }}</li> + <li>{{ SVGAttr("preserveAlpha") }}</li> + <li>{{ SVGAttr("preserveAspectRatio") }}</li> + <li>{{ SVGAttr("primitiveUnits") }}</li> +</ul> + +<h3 id="R">R</h3> + +<ul> + <li>{{ SVGAttr("r") }}</li> + <li>{{ SVGAttr("radius") }}</li> + <li>{{ SVGAttr("refX") }}</li> + <li>{{ SVGAttr("refY") }}</li> + <li>{{ SVGAttr("rendering-intent") }}</li> + <li>{{ SVGAttr("repeatCount") }}</li> + <li>{{ SVGAttr("repeatDur") }}</li> + <li>{{ SVGAttr("requiredExtensions") }}</li> + <li>{{ SVGAttr("requiredFeatures") }}</li> + <li>{{ SVGAttr("restart") }}</li> + <li>{{ SVGAttr("result") }}</li> + <li>{{ SVGAttr("rotate") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h3 id="S">S</h3> + +<ul> + <li>{{ SVGAttr("scale") }}</li> + <li>{{ SVGAttr("seed") }}</li> + <li>{{ SVGAttr("shape-rendering") }}</li> + <li>{{ SVGAttr("slope") }}</li> + <li>{{ SVGAttr("spacing") }}</li> + <li>{{ SVGAttr("specularConstant") }}</li> + <li>{{ SVGAttr("specularExponent") }}</li> + <li>{{ SVGAttr("speed") }}</li> + <li>{{ SVGAttr("spreadMethod") }}</li> + <li>{{ SVGAttr("startOffset") }}</li> + <li>{{ SVGAttr("stdDeviation") }}</li> + <li>{{ SVGAttr("stemh") }}</li> + <li>{{ SVGAttr("stemv") }}</li> + <li>{{ SVGAttr("stitchTiles") }}</li> + <li>{{ SVGAttr("stop-color") }}</li> + <li>{{ SVGAttr("stop-opacity") }}</li> + <li>{{ SVGAttr("strikethrough-position") }}</li> + <li>{{ SVGAttr("strikethrough-thickness") }}</li> + <li>{{ SVGAttr("string") }}</li> + <li>{{ SVGAttr("stroke") }}</li> + <li>{{ SVGAttr("stroke-dasharray") }}</li> + <li>{{ SVGAttr("stroke-dashoffset") }}</li> + <li>{{ SVGAttr("stroke-linecap") }}</li> + <li>{{ SVGAttr("stroke-linejoin") }}</li> + <li>{{ SVGAttr("stroke-miterlimit") }}</li> + <li>{{ SVGAttr("stroke-opacity") }}</li> + <li>{{ SVGAttr("stroke-width") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("surfaceScale") }}</li> + <li>{{ SVGAttr("systemLanguage") }}</li> +</ul> + +<h3 id="T">T</h3> + +<ul> + <li>{{ SVGAttr("tableValues") }}</li> + <li>{{ SVGAttr("target") }}</li> + <li>{{ SVGAttr("targetX") }}</li> + <li>{{ SVGAttr("targetY") }}</li> + <li>{{ SVGAttr("text-anchor") }}</li> + <li>{{ SVGAttr("text-decoration") }}</li> + <li>{{ SVGAttr("text-rendering") }}</li> + <li>{{ SVGAttr("textLength") }}</li> + <li>{{ SVGAttr("to") }}</li> + <li>{{ SVGAttr("transform") }}</li> + <li>{{ SVGAttr("type") }}</li> +</ul> + +<h3 id="U">U</h3> + +<ul> + <li>{{ SVGAttr("u1") }}</li> + <li>{{ SVGAttr("u2") }}</li> + <li>{{ SVGAttr("underline-position") }}</li> + <li>{{ SVGAttr("underline-thickness") }}</li> + <li>{{ SVGAttr("unicode") }}</li> + <li>{{ SVGAttr("unicode-bidi") }}</li> + <li>{{ SVGAttr("unicode-range") }}</li> + <li>{{ SVGAttr("units-per-em") }}</li> +</ul> + +<h3 id="V">V</h3> + +<ul> + <li>{{ SVGAttr("v-alphabetic") }}</li> + <li>{{ SVGAttr("v-hanging") }}</li> + <li>{{ SVGAttr("v-ideographic") }}</li> + <li>{{ SVGAttr("v-mathematical") }}</li> + <li>{{ SVGAttr("values") }}</li> + <li>{{ SVGAttr("version") }}</li> + <li>{{ SVGAttr("vert-adv-y") }}</li> + <li>{{ SVGAttr("vert-origin-x") }}</li> + <li>{{ SVGAttr("vert-origin-y") }}</li> + <li>{{ SVGAttr("viewBox") }}</li> + <li>{{ SVGAttr("viewTarget") }}</li> + <li>{{ SVGAttr("visibility") }}</li> +</ul> + +<h3 id="W">W</h3> + +<ul> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("widths") }}</li> + <li>{{ SVGAttr("word-spacing") }}</li> + <li>{{ SVGAttr("writing-mode") }}</li> +</ul> + +<h3 id="X">X</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("x-height") }}</li> + <li>{{ SVGAttr("x1") }}</li> + <li>{{ SVGAttr("x2") }}</li> + <li>{{ SVGAttr("xChannelSelector") }}</li> + <li>{{ SVGAttr("xlink:actuate") }}</li> + <li>{{ SVGAttr("xlink:arcrole") }}</li> + <li>{{ SVGAttr("xlink:href") }}</li> + <li>{{ SVGAttr("xlink:role") }}</li> + <li>{{ SVGAttr("xlink:show") }}</li> + <li>{{ SVGAttr("xlink:title") }}</li> + <li>{{ SVGAttr("xlink:type") }}</li> + <li>{{ SVGAttr("xml:base") }}</li> + <li>{{ SVGAttr("xml:lang") }}</li> + <li>{{ SVGAttr("xml:space") }}</li> +</ul> + +<h3 id="Y">Y</h3> + +<ul> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("y1") }}</li> + <li>{{ SVGAttr("y2") }}</li> + <li>{{ SVGAttr("yChannelSelector") }}</li> +</ul> + +<h3 id="Z">Z</h3> + +<ul> + <li>{{ SVGAttr("z") }}</li> + <li>{{ SVGAttr("zoomAndPan") }}</li> +</ul> +</div> + +<h2 id="Categories">Categories</h2> + +<h3 id="Animation_event_attributes">Animation event attributes</h3> + +<p>{{ SVGAttr("onbegin") }}, {{ SVGAttr("onend") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onrepeat") }}</p> + +<h3 id="AnimationAttributeTarget" name="AnimationAttributeTarget">Animation attribute target attributes</h3> + +<p>{{ SVGAttr("attributeType") }}, {{ SVGAttr("attributeName") }}</p> + +<h3 id="Animation_timing_attributes">Animation timing attributes</h3> + +<p>{{ SVGAttr("begin") }}, {{ SVGAttr("dur") }}, {{ SVGAttr("end") }}, {{ SVGAttr("min") }}, {{ SVGAttr("max") }}, {{ SVGAttr("restart") }}, {{ SVGAttr("repeatCount") }}, {{ SVGAttr("repeatDur") }}, {{ SVGAttr("fill") }}</p> + +<h3 id="Animation_value_attributes">Animation value attributes</h3> + +<p>{{ SVGAttr("calcMode") }}, {{ SVGAttr("values") }}, {{ SVGAttr("keyTimes") }}, {{ SVGAttr("keySplines") }}, {{ SVGAttr("from") }}, {{ SVGAttr("to") }}, {{ SVGAttr("by") }}, {{ SVGAttr("autoReverse") }}, {{ SVGAttr("accelerate") }}, {{ SVGAttr("decelerate") }}</p> + +<h3 id="Animation_addition_attributes">Animation addition attributes</h3> + +<p>{{ SVGAttr("additive") }}, {{ SVGAttr("accumulate") }}</p> + +<h3 id="Conditional_processing_attributes">Conditional processing attributes</h3> + +<p>{{ SVGAttr("requiredExtensions") }}, {{ SVGAttr("requiredFeatures") }}, {{ SVGAttr("systemLanguage") }}.</p> + +<h3 id="Core_attributes">Core attributes</h3> + +<p>{{ SVGAttr("id") }}, {{ SVGAttr("xml:base") }}, {{ SVGAttr("xml:lang") }}, {{ SVGAttr("xml:space") }}</p> + +<h3 id="Document_event_attributes">Document event attributes</h3> + +<p>{{ SVGAttr("onabort") }}, {{ SVGAttr("onerror") }}, {{ SVGAttr("onresize") }}, {{ SVGAttr("onscroll") }}, {{ SVGAttr("onunload") }}, {{ SVGAttr("onzoom") }}</p> + +<h3 id="Filter_primitive_attributes">Filter primitive attributes</h3> + +<p>{{ SVGAttr("height") }}, {{ SVGAttr("result") }}, {{ SVGAttr("width") }}, {{ SVGAttr("x") }}, {{ SVGAttr("y") }}</p> + +<h3 id="Graphical_event_attributes">Graphical event attributes</h3> + +<p>{{ SVGAttr("onactivate") }}, {{ SVGAttr("onclick") }}, {{ SVGAttr("onfocusin") }}, {{ SVGAttr("onfocusout") }}, {{ SVGAttr("onload") }}, {{ SVGAttr("onmousedown") }}, {{ SVGAttr("onmousemove") }}, {{ SVGAttr("onmouseout") }}, {{ SVGAttr("onmouseover") }}, {{ SVGAttr("onmouseup") }}</p> + +<h3 id="Presentation_attributes">Presentation attributes</h3> + +<div class="note">Note that all SVG presentation attributes can be used as CSS properties.</div> + +<p>{{ SVGAttr("alignment-baseline") }}, {{ SVGAttr("baseline-shift") }}, {{ SVGAttr("clip") }}, {{ SVGAttr("clip-path") }}, {{ SVGAttr("clip-rule") }}, {{ SVGAttr("color") }}, {{ SVGAttr("color-interpolation") }}, {{ SVGAttr("color-interpolation-filters") }}, {{ SVGAttr("color-profile") }}, {{ SVGAttr("color-rendering") }}, {{ SVGAttr("cursor") }}, {{ SVGAttr("direction") }}, {{ SVGAttr("display") }}, {{ SVGAttr("dominant-baseline") }}, {{ SVGAttr("enable-background") }}, {{ SVGAttr("fill") }}, {{ SVGAttr("fill-opacity") }}, {{ SVGAttr("fill-rule") }}, {{ SVGAttr("filter") }}, {{ SVGAttr("flood-color") }}, {{ SVGAttr("flood-opacity") }}, {{ SVGAttr("font-family") }}, {{ SVGAttr("font-size") }}, {{ SVGAttr("font-size-adjust") }}, {{ SVGAttr("font-stretch") }}, {{ SVGAttr("font-style") }}, {{ SVGAttr("font-variant") }}, {{ SVGAttr("font-weight") }}, {{ SVGAttr("glyph-orientation-horizontal") }}, {{ SVGAttr("glyph-orientation-vertical") }}, {{ SVGAttr("image-rendering") }}, {{ SVGAttr("kerning") }}, {{ SVGAttr("letter-spacing") }}, {{ SVGAttr("lighting-color") }}, {{ SVGAttr("marker-end") }}, {{ SVGAttr("marker-mid") }}, {{ SVGAttr("marker-start") }}, {{ SVGAttr("mask") }}, {{ SVGAttr("opacity") }}, {{ SVGAttr("overflow") }}, {{ SVGAttr("pointer-events") }}, {{ SVGAttr("shape-rendering") }}, {{ SVGAttr("stop-color") }}, {{ SVGAttr("stop-opacity") }}, {{ SVGAttr("stroke") }}, {{ SVGAttr("stroke-dasharray") }}, {{ SVGAttr("stroke-dashoffset") }}, {{ SVGAttr("stroke-linecap") }}, {{ SVGAttr("stroke-linejoin") }}, {{ SVGAttr("stroke-miterlimit") }}, {{ SVGAttr("stroke-opacity") }}, {{ SVGAttr("stroke-width") }}, {{ SVGAttr("text-anchor") }}, {{ SVGAttr("text-decoration") }}, {{ SVGAttr("text-rendering") }}, {{ SVGAttr("unicode-bidi") }}, {{ SVGAttr("visibility") }}, {{ SVGAttr("word-spacing") }}, {{ SVGAttr("writing-mode") }}</p> + +<h3 id="Transfer_function_attributes">Transfer function attributes</h3> + +<p>{{ SVGAttr("type") }}, {{ SVGAttr("tableValues") }}, {{ SVGAttr("slope") }}, {{ SVGAttr("intercept") }}, {{ SVGAttr("amplitude") }}, {{ SVGAttr("exponent") }}, {{ SVGAttr("offset") }}</p> + +<h3 id="XLink_attributes">XLink attributes</h3> + +<p>{{ SVGAttr("xlink:href") }}, {{ SVGAttr("xlink:type") }}, {{ SVGAttr("xlink:role") }}, {{ SVGAttr("xlink:arcrole") }}, {{ SVGAttr("xlink:title") }}, {{ SVGAttr("xlink:show") }}, {{ SVGAttr("xlink:actuate") }}</p> diff --git a/files/ko/web/svg/attribute/keytimes/index.html b/files/ko/web/svg/attribute/keytimes/index.html new file mode 100644 index 0000000000..82d6ac0dba --- /dev/null +++ b/files/ko/web/svg/attribute/keytimes/index.html @@ -0,0 +1,87 @@ +--- +title: keyTimes +slug: Web/SVG/Attribute/keyTimes +translation_of: Web/SVG/Attribute/keyTimes +--- +<p>« <a href="/en-US/docs/Web/SVG/Attribute" title="en-US/docs/Web/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>keyTimes</code> 속성은 애니메이션의 pacing을 제어하는 데 사용되는 세미콜론으로 구분 된 시간 값 목록입니다. 목록의 각 시간은 {{ SVGAttr("values") }} 속성 목록의 값에 해당하며 애니메이션에서 값이 사용되는 시기를 정의합니다. <code>keyTimes</code> 목록의 각 시간 값은 0과 1 사이의 부동 소수점 값으로 지정되며 애니메이션 요소의 지속 시간에 대한 비례 오프셋을 나타냅니다. </p> + +<p>만약 <code>keyTimes</code> 목록이 지정될 경우, {{ SVGAttr("values") }} 목록에서와 같이 <code>keyTimes</code> 목록에 있는 값과 정확하게 일치해야합니다.</p> + +<p>각 연속적인 시간 값은 이전 시간 값보다 크거나 같아야 합니다.</p> + +<p><code>keyTimes</code> 목록의 semantics는 interpolation 모드에 따라 다릅니다.</p> + +<ul> + <li>For linear and spline animation, the first time value in the list must be 0, and the last time value in the list must be 1. The key time associated with each value defines when the value is set; values are interpolated between the key times.</li> + <li>For discrete animation, the first time value in the list must be 0. The time associated with each value defines when the value is set; the animation function uses that value until the next time defined in <code>keyTimes</code>.</li> +</ul> + +<p>If the interpolation mode is <em>paced</em>, the <code>keyTimes</code> attribute is ignored.</p> + +<p>If the duration is indefinite, any <code>keyTimes</code> specification will be ignored.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation value attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute" title="http://www.w3.org/TR/SVG/animate.html#KeyTimesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<pre class="brush: html"><?xml version="1.0"?> +<svg width="120" height="120" + viewPort="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + + <circle cx="60" cy="10" r="10"> + + <animate attributeName="cx" + attributeType="XML" + dur="4s" + values="60 ; 110 ; 60 ; 10 ; 60" + keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" + repeatCount="indefinite"/> + + <animate attributeName="cy" + attributeType="XML" + dur="4s" + values="10 ; 60 ; 110 ; 60 ; 10 " + keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1" + repeatCount="indefinite"/> + + </circle> +</svg></pre> + +<p><strong>Live sample</strong></p> + +<p>{{ EmbedLiveSample('Example','120','120') }}</p> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>keyTimes</code> attribute</p> + +<ul> + <li>{{ SVGElement("animate") }}</li> + <li>{{ SVGElement("animateColor") }}</li> + <li>{{ SVGElement("animateMotion") }}</li> + <li>{{ SVGElement("animateTransform") }}</li> +</ul> diff --git a/files/ko/web/svg/attribute/values/index.html b/files/ko/web/svg/attribute/values/index.html new file mode 100644 index 0000000000..6a83963056 --- /dev/null +++ b/files/ko/web/svg/attribute/values/index.html @@ -0,0 +1,86 @@ +--- +title: values +slug: Web/SVG/Attribute/values +translation_of: Web/SVG/Attribute/values +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>values</code> 속성은 사용하는 맥락에 따라 크게 두 가지 의미가 있습니다.</p> + +<p>애니메이션 요소의 경우, values 속성은 세미콜론으로 구분된 하나 이상의 값 목록입니다. 애니메이션은 애니메이션 과정에서 순서대로 값을 적용합니다. 값 목록이 지정되면 {{ SVGAttr("from") }}, {{ SVGAttr("to") }} 그리고 {{ SVGAttr("by") }} 속성 값은 무시됩니다.</p> + +<p>{{ SVGElement("feColorMatrix") }} 요소의 경우 값의 내용은 {{ SVGAttr("type") }} 속성의 값에 따라 다릅니다: </p> + +<ul> + <li>For <code>type="matrix"</code>, <code>values</code> is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ... a34), separated by whitespace and/or a comma.</li> + <li>For <code>type="saturate"</code>, <code>values</code> is a single real number value (0 to 1).</li> + <li>For <code>type="hueRotate"</code>, <code>values</code> is a single one real number value (degrees).</li> + <li>For <code>type="luminanceToAlpha"</code>, <code>values</code> is not applicable.</li> +</ul> + +<p>If the attribute is not specified, then the default behavior depends on the value of attribute {{ SVGAttr("type") }}.</p> + +<ul> + <li>If <code>type="matrix"</code>, then this attribute defaults to the identity matrix.</li> + <li>If <code>type="saturate"</code>, then this attribute defaults to the value 1, which results in the identity matrix.</li> + <li>If <code>type="hueRotate"</code>, then this attribute defaults to the value 0, which results in the identity matrix.</li> +</ul> + +<h2 id="Usage_context">Usage context</h2> + +<h3 id="For_animation_elements">For animation elements</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>Animation value attribute</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute" title="http://www.w3.org/TR/SVG11/animate.html#ValuesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h3 id="For_the_SVGElement(feColorMatrix)_element">For the {{ SVGElement("feColorMatrix") }} element</h3> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td><em>None</em></td> + </tr> + <tr> + <th scope="row">Value</th> + <td><list> | <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint"><number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute" title="http://www.w3.org/TR/SVG11/filters.html#feColorMatrixValuesAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="예제">예제</h2> + +<h2 id="Elements">Elements</h2> + +<p>The following elements can use the <code>values</code> attribute</p> + +<ul> + <li><a href="/en/SVG/Element#Animation" title="en/SVG/Element#Animation">Animation elements</a> »</li> + <li>{{ SVGElement("feColorMatrix") }}</li> +</ul> diff --git a/files/ko/web/svg/attribute/version/index.html b/files/ko/web/svg/attribute/version/index.html new file mode 100644 index 0000000000..07e553eb02 --- /dev/null +++ b/files/ko/web/svg/attribute/version/index.html @@ -0,0 +1,35 @@ +--- +title: version +slug: Web/SVG/Attribute/version +translation_of: Web/SVG/Attribute/version +--- +<p> </p> + +<p><strong><code>version</code></strong> 속성은 해당 SVG 문서가 어떤 명세를 따르고 있는지 표시하기 위해 사용됩니다. 이는 오직 <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg"><svg></a> 요소 내에서만 사용되며 순전히 사용되는 버전의 알림을 위한 용도로 프로세싱이나 렌더링에는 영향을 미치지 않습니다.</p> + +<p>버전을 명시하기 위해 어떤 숫자든지 입력할 수 있지만, 현재로써 유효하게 사용되는 버전은 1.0과 1.1 두 버전만이 유일합니다.</p> + +<p> </p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><a href="/en/SVG/Content_type#Number" title="https://developer.mozilla.org/en/SVG/Content_type#Number"><number></a></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>No</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a href="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute" rel="external" title="http://www.w3.org/TR/SVG11/struct.html#SVGElementVersionAttribute">SVG 1.1 (2nd Edition): version attribute</a></td> + </tr> + </tbody> +</table> diff --git a/files/ko/web/svg/attribute/viewbox/index.html b/files/ko/web/svg/attribute/viewbox/index.html new file mode 100644 index 0000000000..49f5cd3a51 --- /dev/null +++ b/files/ko/web/svg/attribute/viewbox/index.html @@ -0,0 +1,59 @@ +--- +title: viewBox +slug: Web/SVG/Attribute/viewBox +tags: + - SVG + - viewBox +translation_of: Web/SVG/Attribute/viewBox +--- +<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p> + +<p><code>viewBox</code> 속성은 특수한 container element 에 fit 하기 위한 주어진 graphics stretch 의 set 을 명시한다.</p> + +<p><code>viewBox </code>속성의 값은 whitespace and/or a comma 로 나뉘어진 <code>min-x</code>, <code>min-y</code>, <code>width,</code> <code>height </code>4가지 number list 이다. 이는 주어진 element 에 의해 설정된 viewport 의 bounds 에 맵핑되어야 하는 user space 내의 rectangle 을 명시하며, {{ SVGAttr("preserveAspectRatio") }} 속성과 관계가 있다.</p> + +<p>음수로 이루어진 width 또는 height 는 허용되지 않으며 zero 값은 element rendering 이 불가하다.</p> + +<h2 id="Usage_context">Usage context</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">Categories</th> + <td>None</td> + </tr> + <tr> + <th scope="row">Value</th> + <td><em>See above</em></td> + </tr> + <tr> + <th scope="row">Animatable</th> + <td>Yes</td> + </tr> + <tr> + <th scope="row">Normative document</th> + <td><a class="external" href="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute" title="http://www.w3.org/TR/SVG11/coords.html#ViewBoxAttribute">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example">Example</h2> + +<h2 id="Elements">Elements</h2> + +<p>아래 element 들은 <code>viewBox</code> 속성을 사용할 수 있다.</p> + +<ul> + <li>{{ SVGElement("svg") }}</li> + <li>{{ SVGElement("symbol") }}</li> + <li>{{ SVGElement("image") }}</li> + <li>{{ SVGElement("marker") }}</li> + <li>{{ SVGElement("pattern") }}</li> + <li>{{ SVGElement("view") }}</li> +</ul> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/SVG/Tutorial/Positions" title="https://developer.mozilla.org/en/SVG/Tutorial/Positions">SVG Getting Started: Positions</a></li> +</ul> diff --git a/files/ko/web/svg/element/a/index.html b/files/ko/web/svg/element/a/index.html new file mode 100644 index 0000000000..8fa3e7f585 --- /dev/null +++ b/files/ko/web/svg/element/a/index.html @@ -0,0 +1,149 @@ +--- +title: <a> +slug: Web/SVG/Element/a +tags: + - Element + - SVG + - SVG Anchor 엘리먼트 +translation_of: Web/SVG/Element/a +--- +<div>{{SVGRef}}</div> + +<p>The <strong><a></strong> SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.</p> + +<p>In SVG, the <code><a></code> element is a container, meaning, you can create a link around text, like in HTML, but you can also create a link around any shape.</p> + +<div id="Exemple"> +<div class="hidden"> +<pre class="brush: css">@namespace svgns url(http://www.w3.org/2000/svg); +html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> + <!-- A link around a shape --> + <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"> + <circle cx="50" cy="40" r="35"/> + </a> + + <!-- A link around a text --> + <a href="https://developer.mozilla.org/docs/Web/SVG/Element/circle"> + <text x="50" y="90" text-anchor="middle"> + &lt;circle&gt; + </text> + </a> +</svg></pre> + +<pre class="brush: css">/* As SVG does not provide a default visual style for links, + it's considered best practice to add some */ + +@namespace svgns url(http://www.w3.org/2000/svg); + +svgns|a { + cursor: pointer; +} + +svgns|a text { + fill: blue; /* Even for text, SVG use fill over color */ + text-decoration: underline; +} + +svgns|a:hover, svgns|a:active { + outline: dotted 1px blue; +}</pre> + +<p>{{EmbedLiveSample('Exemple', 100, 100)}}</p> +</div> + +<div class="warning"> +<p>Since this element shares its tag name with <a href="/en-US/docs/Web/HTML/Element/a">HTML's <code><a></code> element</a>, selecting "<code>a</code>" with CSS or <a href="/en-US/docs/Web/API/Document/querySelector"><code>querySelector</code></a> may apply to the wrong kind of element. Try <a href="/en-US/docs/Web/CSS/@namespace">the <code>@namespace</code> rule</a> to distinguish between the two.</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<dl> + <dt>{{htmlattrxref("download", "a")}} {{experimental_inline}}</dt> + <dd>This attribute instructs browsers to download a {{Glossary("URL")}} instead of navigating to it, so the user will be prompted to save it as a local file.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{SVGAttr("href")}}</dt> + <dd>This attribute contains the {{Glossary("URL")}} or URL fragment that the hyperlink points to.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("hreflang", "a")}}</dt> + <dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("ping", "a")}} {{experimental_inline}}</dt> + <dd>This attribute contains a space-separated list of URLs to which, when the hyperlink is followed, <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST" title="The HTTP POST method sends data to the server. The type of the body of the request is indicated by the Content-Type header."><code>POST</code></a> requests with the body <code>PING</code> will be sent by the browser (in the background). Typically used for tracking. For a more widely-supported feature addressing the same use cases, see <a href="/en-US/docs/Web/API/Navigator/sendBeacon">Navigator.sendBeacon()</a>.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#List-of-Ts"><list-of-URLs></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}</dt> + <dd>This attribute indicates which <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referer">referrer</a> to send when fetching the {{Glossary("URL")}}.<br> + <small><em>Value type</em>: <code>no-referrer</code>|<code>no-referrer-when-downgrade</code>|<code>same-origin</code>|<code>origin</code>|<code>strict-origin</code>|<code>origin-when-cross-origin</code>|<code>strict-origin-when-cross-origin</code>|<code>unsafe-url</code> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>no</strong></small></dd> + <dt>{{htmlattrxref("rel", "a")}} {{experimental_inline}}</dt> + <dd>This attribute specifies the relationship of the target object to the link object.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/HTML/Link_types"><list-of-Link-Types></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("target")}}</dt> + <dd>This attribute specifies where to display the linked {{Glossary("URL")}}.<br> + <small><em>Value type</em>: <code>_self</code>|<code>_parent</code>|<code>_top</code>|<code>_blank</code>|<strong><name></strong> ; <em>Default value</em>: <code>_self</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{htmlattrxref("type", "a")}}</dt> + <dd>This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL.<br> + <small><em>Value type</em>: <strong><string></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}</dt> + <dd>This attribute contains the URL or URL fragment that the hyperlink points to.<br> + <small><em>Value type</em>: <strong><a href="/docs/Web/SVG/Content_type#URL"><URL></a></strong> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<h3 id="Global_attributes">Global attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Document_Element_Event_Attributes">Document element event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>XLink Attributes</dt> + <dd><small>Most notably: {{SVGAttr("xlink:title")}}</small></dd> + <dt>ARIA Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}</td> + <td>{{Spec2('Referrer Policy')}}</td> + <td>Added the <code>referrerpolicy</code> attribute.</td> + </tr> + <tr> + <td>{{SpecName("SVG2", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG2")}}</td> + <td>Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}</td> + </tr> + <tr> + <td>{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}</td> + <td>{{Spec2("SVG1.1")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.a")}}</p> diff --git a/files/ko/web/svg/element/altglyph/index.html b/files/ko/web/svg/element/altglyph/index.html new file mode 100644 index 0000000000..5da1e1848c --- /dev/null +++ b/files/ko/web/svg/element/altglyph/index.html @@ -0,0 +1,79 @@ +--- +title: <altGlyph> +slug: Web/SVG/Element/altGlyph +tags: + - Element + - SVG + - "altGlyph\_엘리먼트" +translation_of: Web/SVG/Element/altGlyph +--- +<div>{{SVGRef}}{{deprecated_header}}</div> + +<p><code>altGlyph</code> 엘리먼트는 하위 문자 데이타를 랜더링 하기 위해 사용되는 매우복잡한 상형문자의 섹션을 허용한다.</p> + +<h2 id="사용예_컨텍스트">사용예 컨텍스트</h2> + +<p>{{svginfo}}</p> + +<h2 id="속성들">속성들</h2> + +<h3 id="글로벌_속성들">글로벌 속성들</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en-US/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en-US/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en-US/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li><a href="/en-US/SVG/Attribute#XLink">XLink attributes</a> »</li> + <li>{{SVGAttr("class")}}</li> + <li>{{SVGAttr("style")}}</li> + <li>{{SVGAttr("externalResourcesRequired")}}</li> +</ul> + +<h3 id="특정_속성들">특정 속성들</h3> + +<ul> + <li>{{SVGAttr("x")}}</li> + <li>{{SVGAttr("y")}}</li> + <li>{{SVGAttr("dx")}}</li> + <li>{{SVGAttr("dy")}}</li> + <li>{{SVGAttr("rotate")}}</li> + <li>{{SVGAttr("glyphRef")}}</li> + <li>{{SVGAttr("format")}}</li> + <li>{{SVGAttr("xlink:href")}}</li> +</ul> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 엘리먼트는 <code><a href="/en-US/docs/Web/API/SVGAltGlyphElement">SVGAltGlyphElement</a></code> 인터페이스를 구현한다..</p> + +<h2 id="명세서들">명세서들</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세서</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG1.1', 'text.html#AltGlyphElement', '<altGlyph>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>초기화 선언</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("svg.elements.altGlyph")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{SVGElement("tspan")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> +</ul> diff --git a/files/ko/web/svg/element/circle/index.html b/files/ko/web/svg/element/circle/index.html new file mode 100644 index 0000000000..bfeaab30ac --- /dev/null +++ b/files/ko/web/svg/element/circle/index.html @@ -0,0 +1,95 @@ +--- +title: <circle> +slug: Web/SVG/Element/circle +translation_of: Web/SVG/Element/circle +--- +<div>{{SVGRef}}</div> + +<p><code>circle(원)은</code> 엘리먼트는 중심점과 반지름에 기초하여 원을 생성하는데 사용되는 SVG의 기본 모양이다. </p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"> + <circle cx="50" cy="50" r="50"/> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, 100)}}</p> +</div> + +<h2 id="사용예_컨텍스트">사용예 컨텍스트</h2> + +<p>{{svginfo}}</p> + +<h2 id="예제">예제</h2> + +<pre class="brush: xml"><?xml version="1.0"?> +<svg viewBox="0 0 120 120" version="1.1" + xmlns="http://www.w3.org/2000/svg"> + <circle cx="60" cy="60" r="50"/> +</svg></pre> + +<p>» <a href="https://mdn.mozillademos.org/files/7707/circle2.svg">circle.svg</a></p> + +<h2 id="속성들">속성들</h2> + +<h3 id="글로벌_속성들">글로벌 속성들</h3> + +<ul> + <li><a href="/en-US/SVG/Attribute#Conditional_processing_attributes">조건부 처리 속성들</a> »</li> + <li><a href="/en-US/SVG/Attribute#Core_attributes">주요 속성들</a> »</li> + <li><a href="/en-US/SVG/Attribute#Graphical_event_attributes">그래픽 이벤트 속성들</a> »</li> + <li><a href="/en-US/SVG/Attribute#Presentation_attributes">표현 속성들</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="특정_속성들">특정 속성들</h3> + +<ul> + <li>{{ SVGAttr("cx") }}</li> + <li>{{ SVGAttr("cy") }}</li> + <li>{{ SVGAttr("r") }}</li> +</ul> + +<h2 id="DOM_인터페이스">DOM 인터페이스</h2> + +<p>이 엘리먼트는 {{ domxref("SVGCircleElement") }} 를 구현한다..</p> + +<h2 id="명세서들">명세서들</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">명세서</th> + <th scope="col">상태</th> + <th scope="col">비고</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'shapes.html#CircleElement', '<circle>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#CircleElement', '<circle>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>초기화 선언</td> + </tr> + </tbody> +</table> + +<h2 id="브라우저_호환성">브라우저 호환성</h2> + +<p>{{Compat("svg.elements.circle")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ SVGElement("ellipse") }}</li> +</ul> diff --git a/files/ko/web/svg/element/ellipse/index.html b/files/ko/web/svg/element/ellipse/index.html new file mode 100644 index 0000000000..31997952c3 --- /dev/null +++ b/files/ko/web/svg/element/ellipse/index.html @@ -0,0 +1,110 @@ +--- +title: <ellipse> +slug: Web/SVG/Element/ellipse +tags: + - Element + - Reference + - SVG + - SVG Grahpics +translation_of: Web/SVG/Element/ellipse +--- +<div>{{SVGRef}}</div> + +<p><strong><code><ellipse></code></strong> 요소는 SVG의 기본 모양 중 하나로, 중심좌표와 x축, y축 반지름을 이용하여 타원을 생성합니다.</p> + +<div class="blockIndicator note"> +<p><strong>참고:</strong> 타원은 정확한 방향을 특정할 수 없습니다. (예를 들어, 45도 기울어진 타원을 그리려고 할 경우) 하지만 {{SVGAttr("transform")}}속성을 사용함으로써 회전할 수는 있습니다.</p> +</div> + +<div id="LiveSample"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html"><svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg"> + <ellipse cx="100" cy="50" rx="100" ry="50" /> +</svg></pre> + +<p>{{EmbedLiveSample('LiveSample', 100, '100%')}}</p> +</div> + +<h2 id="Attributes">Attributes</h2> + +<dl> + <dt>{{SVGAttr("cx")}}</dt> + <dd>The x position of the ellipse.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("cy")}}</dt> + <dd>The y position of the ellipse.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>0</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("rx")}}</dt> + <dd>The radius of the ellipse on the x axis.<br> + <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("ry")}}</dt> + <dd>The radius of the ellipse on the y axis.<br> + <small><em>Value type</em>: <code>auto</code>|<a href="/docs/Web/SVG/Content_type#Length"><strong><length></strong></a>|<a href="/docs/Web/SVG/Content_type#Percentage"><strong><percentage></strong></a> ; <em>Default value</em>: <code>auto</code>; <em>Animatable</em>: <strong>yes</strong></small></dd> + <dt>{{SVGAttr("pathLength")}}</dt> + <dd>This attribute lets specify the total length for the path, in user units.<br> + <small><em>Value type</em>: <a href="/docs/Web/SVG/Content_type#Number"><strong><number></strong></a> ; <em>Default value</em>: <em>none</em>; <em>Animatable</em>: <strong>yes</strong></small></dd> +</dl> + +<div class="note"> +<p><strong>Note:</strong> Starting with SVG2 <code>cx</code>, <code>cy</code>, <code>rx</code> and <code>ry</code> are <em>Geometry Propertie</em>s, meaning those attributes can also be used as CSS properties for that element.</p> +</div> + +<h3 id="Global_attributes">Global attributes</h3> + +<dl> + <dt><a href="/docs/Web/SVG/Attribute/Core">Core Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Styling">Styling Attributes</a></dt> + <dd><small>{{SVGAttr('class')}}, {{SVGAttr('style')}}</small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Conditional_Processing">Conditional Processing Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}</small></dd> + <dt>Event Attributes</dt> + <dd><small><a href="/docs/Web/SVG/Attribute/Events#Global_Event_Attributes">Global event attributes</a>, <a href="/docs/Web/SVG/Attribute/Events#Graphical_Event_Attributes">Graphical event attributes</a></small></dd> + <dt><a href="/docs/Web/SVG/Attribute/Presentation">Presentation Attributes</a></dt> + <dd><small>Most notably: {{SVGAttr('clip-path')}}, {{SVGAttr('clip-rule')}}, {{SVGAttr('color')}}, {{SVGAttr('color-interpolation')}}, {{SVGAttr('color-rendering')}}, {{SVGAttr('cursor')}}, {{SVGAttr('display')}}, {{SVGAttr('fill')}}, {{SVGAttr('fill-opacity')}}, {{SVGAttr('fill-rule')}}, {{SVGAttr('filter')}}, {{SVGAttr('mask')}}, {{SVGAttr('opacity')}}, {{SVGAttr('pointer-events')}}, {{SVGAttr('shape-rendering')}}, {{SVGAttr('stroke')}}, {{SVGAttr('stroke-dasharray')}}, {{SVGAttr('stroke-dashoffset')}}, {{SVGAttr('stroke-linecap')}}, {{SVGAttr('stroke-linejoin')}}, {{SVGAttr('stroke-miterlimit')}}, {{SVGAttr('stroke-opacity')}}, {{SVGAttr('stroke-width')}}, {{SVGAttr("transform")}}, {{SVGAttr('vector-effect')}}, {{SVGAttr('visibility')}}</small></dd> + <dt>ARIA Attributes</dt> + <dd><small><code>aria-activedescendant</code>, <code>aria-atomic</code>, <code>aria-autocomplete</code>, <code>aria-busy</code>, <code>aria-checked</code>, <code>aria-colcount</code>, <code>aria-colindex</code>, <code>aria-colspan</code>, <code>aria-controls</code>, <code>aria-current</code>, <code>aria-describedby</code>, <code>aria-details</code>, <code>aria-disabled</code>, <code>aria-dropeffect</code>, <code>aria-errormessage</code>, <code>aria-expanded</code>, <code>aria-flowto</code>, <code>aria-grabbed</code>, <code>aria-haspopup</code>, <code>aria-hidden</code>, <code>aria-invalid</code>, <code>aria-keyshortcuts</code>, <code>aria-label</code>, <code>aria-labelledby</code>, <code>aria-level</code>, <code>aria-live</code>, <code>aria-modal</code>, <code>aria-multiline</code>, <code>aria-multiselectable</code>, <code>aria-orientation</code>, <code>aria-owns</code>, <code>aria-placeholder</code>, <code>aria-posinset</code>, <code>aria-pressed</code>, <code>aria-readonly</code>, <code>aria-relevant</code>, <code>aria-required</code>, <code>aria-roledescription</code>, <code>aria-rowcount</code>, <code>aria-rowindex</code>, <code>aria-rowspan</code>, <code>aria-selected</code>, <code>aria-setsize</code>, <code>aria-sort</code>, <code>aria-valuemax</code>, <code>aria-valuemin</code>, <code>aria-valuenow</code>, <code>aria-valuetext</code>, <code>role</code></small></dd> +</dl> + +<h2 id="Usage_notes">Usage notes</h2> + +<p>{{svginfo}}</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}</td> + <td>{{Spec2('SVG2')}}</td> + <td>Added <code>auto</code> value for <code>rx</code> and <code>ry</code></td> + </tr> + <tr> + <td>{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}</td> + <td>{{Spec2('SVG1.1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("svg.elements.ellipse")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>Other SVG basic shapes: <strong>{{ SVGElement('circle') }}</strong>, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}</li> +</ul> diff --git a/files/ko/web/svg/element/index.html b/files/ko/web/svg/element/index.html new file mode 100644 index 0000000000..f1aa117e10 --- /dev/null +++ b/files/ko/web/svg/element/index.html @@ -0,0 +1,218 @@ +--- +title: SVG element reference +slug: Web/SVG/Element +tags: + - NeedsTranslation + - SVG + - SVG Reference + - SVG 엘리먼트 + - TopicStub +translation_of: Web/SVG/Element +--- +<p>« <a href="/en-US/docs/SVG" title="SVG">SVG</a> / <a href="/en-US/docs/SVG/Attribute" title="SVG/Attribute">SVG Attribute reference</a> »</p> + +<h2 id="SVG_엘리먼트들">SVG 엘리먼트들</h2> + +<div class="index"><span id="A">A</span> + +<ul> + <li>{{SVGElement("a")}}</li> + <li>{{SVGElement("altGlyph")}}</li> + <li>{{SVGElement("altGlyphDef")}}</li> + <li>{{SVGElement("altGlyphItem")}}</li> + <li>{{SVGElement("animate")}}</li> + <li>{{SVGElement("animateColor")}}</li> + <li>{{SVGElement("animateMotion")}}</li> + <li>{{SVGElement("animateTransform")}}</li> +</ul> +<span id="C">B C</span> + +<ul> + <li>{{SVGElement("circle")}}</li> + <li>{{SVGElement("clipPath")}}</li> + <li>{{SVGElement("color-profile")}}</li> + <li>{{SVGElement("cursor")}}</li> +</ul> +<span id="D">D</span> + +<ul> + <li>{{SVGElement("defs")}}</li> + <li>{{SVGElement("desc")}}</li> +</ul> +<span id="E">E</span> + +<ul> + <li>{{SVGElement("ellipse")}}</li> +</ul> +<span id="F">F</span> + +<ul> + <li>{{SVGElement("feBlend")}}</li> + <li>{{SVGElement("feColorMatrix")}}</li> + <li>{{SVGElement("feComponentTransfer")}}</li> + <li>{{SVGElement("feComposite")}}</li> + <li>{{SVGElement("feConvolveMatrix")}}</li> + <li>{{SVGElement("feDiffuseLighting")}}</li> + <li>{{SVGElement("feDisplacementMap")}}</li> + <li>{{SVGElement("feDistantLight")}}</li> + <li>{{SVGElement("feFlood")}}</li> + <li>{{SVGElement("feFuncA")}}</li> + <li>{{SVGElement("feFuncB")}}</li> + <li>{{SVGElement("feFuncG")}}</li> + <li>{{SVGElement("feFuncR")}}</li> + <li>{{SVGElement("feGaussianBlur")}}</li> + <li>{{SVGElement("feImage")}}</li> + <li>{{SVGElement("feMerge")}}</li> + <li>{{SVGElement("feMergeNode")}}</li> + <li>{{SVGElement("feMorphology")}}</li> + <li>{{SVGElement("feOffset")}}</li> + <li>{{SVGElement("fePointLight")}}</li> + <li>{{SVGElement("feSpecularLighting")}}</li> + <li>{{SVGElement("feSpotLight")}}</li> + <li>{{SVGElement("feTile")}}</li> + <li>{{SVGElement("feTurbulence")}}</li> + <li>{{SVGElement("filter")}}</li> + <li>{{SVGElement("font")}}</li> + <li>{{SVGElement("font-face")}}</li> + <li>{{SVGElement("font-face-format")}}</li> + <li>{{SVGElement("font-face-name")}}</li> + <li>{{SVGElement("font-face-src")}}</li> + <li>{{SVGElement("font-face-uri")}}</li> + <li>{{SVGElement("foreignObject")}}</li> +</ul> +<span id="G">G</span> + +<ul> + <li>{{SVGElement("g")}}</li> + <li>{{SVGElement("glyph")}}</li> + <li>{{SVGElement("glyphRef")}}</li> +</ul> +<span id="H">H</span> + +<ul> + <li>{{SVGElement("hkern")}}</li> +</ul> +<span id="I">I</span> + +<ul> + <li>{{SVGElement("image")}}</li> +</ul> +<span id="L">J K L</span> + +<ul> + <li>{{SVGElement("line")}}</li> + <li>{{SVGElement("linearGradient")}}</li> +</ul> +<span id="M">M</span> + +<ul> + <li>{{SVGElement("marker")}}</li> + <li>{{SVGElement("mask")}}</li> + <li>{{SVGElement("metadata")}}</li> + <li>{{SVGElement("missing-glyph")}}</li> + <li>{{SVGElement("mpath")}}</li> +</ul> +<span id="P">N O P</span> + +<ul> + <li>{{SVGElement("path")}}</li> + <li>{{SVGElement("pattern")}}</li> + <li>{{SVGElement("polygon")}}</li> + <li>{{SVGElement("polyline")}}</li> +</ul> +<span id="R">Q R</span> + +<ul> + <li>{{SVGElement("radialGradient")}}</li> + <li>{{SVGElement("rect")}}</li> +</ul> +<span id="S">S</span> + +<ul> + <li>{{SVGElement("script")}}</li> + <li>{{SVGElement("set")}}</li> + <li>{{SVGElement("stop")}}</li> + <li>{{SVGElement("style")}}</li> + <li>{{SVGElement("svg")}}</li> + <li>{{SVGElement("switch")}}</li> + <li>{{SVGElement("symbol")}}</li> +</ul> +<span id="T">T</span> + +<ul> + <li>{{SVGElement("text")}}</li> + <li>{{SVGElement("textPath")}}</li> + <li>{{SVGElement("title")}}</li> + <li>{{SVGElement("tref")}}</li> + <li>{{SVGElement("tspan")}}</li> +</ul> +<span id="U">U</span> + +<ul> + <li>{{SVGElement("use")}}</li> +</ul> +<span id="V">V — Z</span> + +<ul> + <li>{{SVGElement("view")}}</li> + <li>{{SVGElement("vkern")}}</li> +</ul> +</div> + +<h2 id="범주들">범주들</h2> + +<h3 id="애니메이션_엘리먼트들">애니메이션 엘리먼트들</h3> + +<p>{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}</p> + +<h3 id="기본_모양들">기본 모양들</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="컨테이너_엘리먼트들">컨테이너 엘리먼트들</h3> + +<p>{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}</p> + +<h3 id="기술하는_엘리먼트들">기술하는 엘리먼트들</h3> + +<p>{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}</p> + +<h3 id="기본_필터_엘리먼트들">기본 필터 엘리먼트들</h3> + +<p>{{SVGElement("feBlend")}}, {{SVGElement("feColorMatrix")}}, {{SVGElement("feComponentTransfer")}}, {{SVGElement("feComposite")}}, {{SVGElement("feConvolveMatrix")}}, {{SVGElement("feDiffuseLighting")}}, {{SVGElement("feDisplacementMap")}}, {{SVGElement("feFlood")}},{{SVGElement("feFuncA")}}, {{SVGElement("feFuncB")}}, {{SVGElement("feFuncG")}}, {{SVGElement("feFuncR")}},{{SVGElement("feGaussianBlur")}}, {{SVGElement("feImage")}}, {{SVGElement("feMerge")}}, {{SVGElement("feMergeNode")}}, {{SVGElement("feMorphology")}}, {{SVGElement("feOffset")}}, {{SVGElement("feSpecularLighting")}}, {{SVGElement("feTile")}}, {{SVGElement("feTurbulence")}}</p> + +<h3 id="폰트_엘리먼트들">폰트 엘리먼트들</h3> + +<p>{{SVGElement("font")}}, {{SVGElement("font-face")}}, {{SVGElement("font-face-format")}}, {{SVGElement("font-face-name")}}, {{SVGElement("font-face-src")}}, {{SVGElement("font-face-uri")}}, {{SVGElement("hkern")}}, {{SVGElement("vkern")}}</p> + +<h3 id="구배(경사)_엘리먼트들">구배(경사) 엘리먼트들</h3> + +<p>{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}</p> + +<h3 id="그래픽_엘리먼트들">그래픽 엘리먼트들</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}</p> + +<h3 id="가벼운_소스_엘리먼트들">가벼운 소스 엘리먼트들</h3> + +<p>{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}</p> + +<h3 id="Shape" name="Shape">모양 엘리먼트들</h3> + +<p>{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}</p> + +<h3 id="구조적인_엘리먼트들">구조적인 엘리먼트들</h3> + +<p>{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}</p> + +<h3 id="TextContent" name="TextContent">텍스트 컨텍스트 엘리먼트들</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="텍스트_컨텍스트_하위_엘리먼트들">텍스트 컨텍스트 하위 엘리먼트들</h3> + +<p>{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}</p> + +<h3 id="범주화_되지_않은_엘리먼트들">범주화 되지 않은 엘리먼트들</h3> + +<p>{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}</p> diff --git a/files/ko/web/svg/element/사각형/index.html b/files/ko/web/svg/element/사각형/index.html new file mode 100644 index 0000000000..90a3d08d24 --- /dev/null +++ b/files/ko/web/svg/element/사각형/index.html @@ -0,0 +1,95 @@ +--- +title: <rect> +slug: Web/SVG/Element/사각형 +translation_of: Web/SVG/Element/rect +--- +<div>{{SVGRef}}</div> + +<p><span style="line-height: 1.5;"><strong><rect></strong> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다.</span> 또한 모서리가 둥근 사각형을 만들 수 있다.</p> + +<div id="Example"> +<div class="hidden"> +<pre class="brush: css">html,body,svg { height:100% }</pre> +</div> + +<pre class="brush: html; highlight[4]"><svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg"> + <!-- Simple rect element --> + <rect x="0" y="0" width="100" height="100" /> + + <!-- Rounded corner rect element --> + <rect x="120" y="0" width="100" height="100" rx="15" ry="15" /> +</svg></pre> + +<p>{{EmbedLiveSample('Example', 100, '100%')}}</p> +</div> + +<h2 id="컨택스트_사용해보기">컨택스트 사용해보기</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="row">카테고리</th> + <td>기본 도형 요소, 그래픽 요소, 모형 요소</td> + </tr> + <tr> + <th scope="row">허용 된 콘텐츠</th> + <td>Any number of the following elements, in any order:<br> + <a href="/en/SVG/Element#Animation" title="en/SVG/Attribute#Animation">Animation elements</a> »<br> + <a href="/en/SVG/Element#Descriptive" title="en/SVG/Attribute#Descriptive">Descriptive elements</a> »</td> + </tr> + <tr> + <th scope="row">규범 문서</th> + <td><a class="external" href="http://www.w3.org/TR/SVG/shapes.html#RectElement" title="http://www.w3.org/TR/SVG/shapes.html#RectElement">SVG 1.1 (2nd Edition)</a></td> + </tr> + </tbody> +</table> + +<h2 id="Example_2">Example</h2> + +<h3 id="간단한_rect_사용하기">간단한 <code>rect</code> 사용하기</h3> + +<p>» <a href="https://developer.mozilla.org/files/3247/rect-1.svg" title="https://developer.mozilla.org/files/3247/rect-1.svg">rect-1.svg</a></p> + +<h3 id="라운드_코너와_rect_사용하기">라운드 코너와 <span style="font-family: 'Courier New','Andale Mono',monospace; font-weight: inherit; line-height: normal;">rect </span><span style="font-size: 1.7142857142857142rem;">사용하기</span></h3> + +<p>» <a href="https://developer.mozilla.org/files/3248/rect-2.svg" title="https://developer.mozilla.org/files/3248/rect-2.svg">rect-2.svg</a></p> + +<h2 id="속성">속성</h2> + +<h3 id="전역_속성">전역 속성</h3> + +<ul> + <li><a href="/en/SVG/Attribute#ConditionalProccessing" title="en/SVG/Attribute#ConditionalProccessing">Conditional processing attributes</a> »</li> + <li><a href="/en/SVG/Attribute#Core" title="en/SVG/Attribute#Core">Core attributes</a> »</li> + <li><a href="/en/SVG/Attribute#GraphicalEvent" title="en/SVG/Attribute#GraphicalEvent">Graphical event attributes</a> »</li> + <li><a href="/en/SVG/Attribute#Presentation" title="en/SVG/Attribute#Presentation">Presentation attributes</a> »</li> + <li>{{ SVGAttr("class") }}</li> + <li>{{ SVGAttr("style") }}</li> + <li>{{ SVGAttr("externalResourcesRequired") }}</li> + <li>{{ SVGAttr("transform") }}</li> +</ul> + +<h3 id="지정_속성">지정 속성</h3> + +<ul> + <li>{{ SVGAttr("x") }}</li> + <li>{{ SVGAttr("y") }}</li> + <li>{{ SVGAttr("width") }}</li> + <li>{{ SVGAttr("height") }}</li> + <li>{{ SVGAttr("rx") }}</li> + <li>{{ SVGAttr("ry") }}</li> +</ul> + +<h2 id="DOM_Interface">DOM Interface</h2> + +<p>This element implements the <code><a href="/en/DOM/SVGRectElement" title="en/DOM/SVGRectElement">SVGRectElement</a></code> interface.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{Compat("svg.elements.rect")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{ SVGElement("path") }}</li> +</ul> diff --git a/files/ko/web/svg/index.html b/files/ko/web/svg/index.html new file mode 100644 index 0000000000..095a7fb090 --- /dev/null +++ b/files/ko/web/svg/index.html @@ -0,0 +1,101 @@ +--- +title: SVG +slug: Web/SVG +tags: + - 2D Graphics + - 2D 그래픽 + - References + - SVG + - TopicStub +translation_of: Web/SVG +--- +<div class="callout-box"><strong><a href="/ko/docs/SVG/Tutorial" title="SVG/Tutorial">시작하기</a></strong><br> +이 튜토리얼은 SVG를 시작할 수 있도록 도움을 줄 것입니다.</div> + +<p><strong>가변 가능한 벡터 그래픽 (SVG)은 </strong>2차원의 벡터 그래픽을 기술하기 위한 <a href="/ko/docs/XML" title="XML">XML</a> 기반 마크업 언어이다. HTML이 텍스트를 표현하는 것처럼, SVG는 본질적으로 그래픽을 표현한다.</p> + +<p>SVG는 텍스트 기반의 오픈 웹 표준이다. SVG는 의심할바 없이 CSS, DOM, SMIL 같은 다른 웹 표준과 함께 작동하기 위해서 디자인 되었다.</p> + +<p>SVG 이미지들, 그것과 관련된 작동들은 XML <a href="https://wiki.developer.mozilla.org/en-US/docs/XML">XML</a> 텍스트 파일로 정의되어있다. 그렇기에 검색될 수 있고, 색인 가능하고, 스크립트 될 수 있고 압축 가능하다. SVG파일은 추가적으로 어떤 텍스트 에디터에서나 드로잉 소프트웨어에서도 만들어질 수 있다.</p> + +<div class="cleared row topicpage-table"> +<div class="section"> +<h2 class="Documentation" id="문_서">문 서</h2> + +<dl> + <dt><a href="/ko/docs/Web/SVG/Element">SVG 요소 레퍼런스</a></dt> + <dd>SVG 요소들에 대한 상세한 정보를 담고있다.</dd> + <dt><a href="/ko/docs/Web/SVG/Attribute">SVG 속성 레퍼런스</a></dt> + <dd>SVG 속성들에 대한 상세한 정보를 담고있다.</dd> + <dt><a href="/ko/docs/DOM/DOM_Reference#SVG_interfaces">SVG DOM 인터페이스 레퍼런스</a></dt> + <dd>전체 SVG DOM API에 대한 상세한 정보를 담고있다.</dd> + <dt><a href="https://developer.mozilla.org/ko/docs/Web/SVG/Applying_SVG_effects_to_HTML_content">HTML 컨텐츠에 SVG 효과 적용하기</a></dt> + <dd>SVG는 {{Glossary("HTML")}}, {{Glossary("CSS")}}, {{Glossary("JavaScript")}}와 함께 동작한다. SVG를 사용해 일반적인 HTML와 웹애플리케이션을 개선할 수 있다.</dd> + <dt>Mozilla 에서 SVG</dt> + <dd>Mozilla에서 어떻게 SVG가 구현되었는지에 대한 참고 자료와 정보를 담고있다. + <ul> + <li><a href="/ko/docs/SVG_in_Firefox">Firefox에서 얼마나 많은 SVG가 구현되었는가?</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial">사용하는 방법 튜토리얼</a></li> + <li><a href="/ko/docs/SVG_In_HTML_Introduction">XHTML에서 SVG</a></li> + </ul> + </dd> +</dl> + +<p><span class="alllinks"><a href="/ko/docs/tag/SVG">전체 보기...</a></span></p> + +<h2 class="Community" id="커뮤니티">커뮤니티</h2> + +<ul> + <li>Mozilla 포럼들을 보라. {{DiscussionList("dev-tech-svg", "mozilla.dev.tech.svg")}}</li> +</ul> + +<h2 class="Tools" id="도구들">도구들</h2> + +<ul> + <li><a href="http://www.w3.org/Graphics/SVG/Test/">SVG 테스트 수트</a></li> + <li><a href="http://jiggles.w3.org/svgvalidator/">SVG 검증기</a> (더 이상 사용되지 않음)</li> + <li><a href="/ko/docs/tag/SVG:Tools" title="tag/SVG:Tools">그 외의 도구들</a></li> + <li>다른 자원들: <a href="/ko/docs/XML">XML</a>, <a href="/ko/docs/CSS">CSS</a>, <a href="/ko/docs/DOM">DOM</a>, <a href="/ko/docs/HTML/Canvas">Canvas</a></li> +</ul> +</div> + +<div class="section"> +<h2 class="Related_Topics" id="예제들">예제들</h2> + +<ul> + <li>Google <a href="http://maps.google.com">Maps</a> (경로 중첩) & <a href="http://docs.google.com">문서들</a> (스프레드시트 차트)</li> + <li><a href="http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml">SVG 버블 메뉴</a></li> + <li><a href="http://jwatt.org/svg/authoring/">SVG 제작 가이드라인</a></li> + <li><a href="/ko/docs/Mozilla_SVG_Project">Mozilla SVG 프로젝트</a>의 개요</li> + <li>SVG와 Mozilla 관련한 <a href="/ko/docs/SVG/FAQ" title="SVG/FAQ">FAQ : 자주 묻는 질문들</a></li> + <li>SVG Open 2009에 <a href="http://jwatt.org/svg-open-US/docs/2009/slides.xhtml">SVG 와 Mozilla</a>와 관련된 슬라이드와 데모들</li> + <li><a href="/ko/docs/SVG/SVG_as_an_Image">이미지로서 SVG</a></li> + <li><a href="/ko/docs/SVG/SVG_animation_with_SMIL">SMIL로 SVG 애니메이션</a></li> + <li><a href="http://plurib.us/1shot/2007/svg_gallery/">SVG 아트 갤러리</a></li> + <li>그 외의 예제들 (<a href="http://croczilla.com/bits_and_pieces/svg/samples">SVG 예제 croczilla.com</a>, <a href="http://www.carto.net/papers/svg/samples/">carto.net</a>)</li> +</ul> + +<h3 id="애니메이션과_상호작용들">애니메이션과 상호작용들</h3> + +<p>HTML과 마찬가지로 SVG은 도큐먼트 모델(DOM)와 이벤트를 가지고 있으며, JavaScript로 접근할 수 있다. 이를 통해 개발자는 풍부한 애니메이션과 이미지들의 상호작용을 생성할 수 있다.</p> + +<ul> + <li><a href="http://svg-wow.org/">svg-wow.org</a> 에서 몇몇 실제 눈요기 SVG</li> + <li>SMIL 애니메이션 지원을 확장하기 위한 Firefox 확장 (<a href="http://schepers.cc/grafox/">Grafox</a>) </li> + <li>상호작용하는 <a href="http://people.mozilla.com/~vladimir/demos/photos.svg">사진</a> 조작</li> + <li>SVG의 <code>foreignObject를 사용하는 </code><a href="http://starkravingfinkle.org/blog/2007/07/firefox-3-svg-foreignobject/">HTML 변환들</a></li> +</ul> + +<h3 id="매핑_차트_게임_그리고_3D_실험들">매핑, 차트, 게임 그리고 3D 실험들</h3> + +<p>While 웹 컨텍스트를 향상히기는 방법으로 작은 SVG는 먼길을 갈 수 있는 동안 여기 많은 SVG 사용법들에 대한 몇몇 예제가 있다..</p> + +<ul> + <li><a href="http://www.codedread.com/yastframe.php">SVG 테트리스</a>와 <a href="http://www.treebuilder.de/svg/connect4.svg">커넥트 4</a></li> + <li><a href="http://www.carto.net/papers/svg/us_population/index.html">미국 인구 지도</a></li> + <li><a href="http://www.treebuilder.de/default.asp?file=441875.xml">3D 박스</a> & <a href="http://www.treebuilder.de/default.asp?file=206524.xml">3D 박스들</a></li> + <li><a href="http://jvectormap.com/">jVectorMap</a> (데이터 시각화를 위해 상호작용하는 Map)</li> + <li><a href="http://jointjs.com">JointJS</a> (JavaScript 다이어그램 라이브러리)</li> +</ul> +</div> +</div> diff --git a/files/ko/web/svg/tutorial/index.html b/files/ko/web/svg/tutorial/index.html new file mode 100644 index 0000000000..1cc6c1f8d5 --- /dev/null +++ b/files/ko/web/svg/tutorial/index.html @@ -0,0 +1,36 @@ +--- +title: SVG 튜토리얼 +slug: Web/SVG/Tutorial +tags: + - SVG + - 'SVG:튜토리얼' + - 중급 +translation_of: Web/SVG/Tutorial +--- +<p>확장 가능한 벡터 그래픽(Scalable Vector Graphics), <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">SVG</a>는 그래픽을 마크업하기 위한 W3C XML의 특수언어(dialect)입니다. SVG는 파이어폭스, 오페라, 웹킷 브라우저, 인터넷 익스플로러 및 기타 여러 브라우저에서 부분적으로 지원하고 있습니다.</p> + +<p>본 튜토리얼의 목적은 SVG 내부 구조를 설명하는 데 있으며, 기술적인 세부 사항을 다룹니다. 만약 그저 아름다운 이미지를 그리려고 한다면, <a class="external external-icon" href="http://inkscape.org/doc/" title="http://inkscape.org/doc/">Inkscape's documentation page</a>에서 더 많은 유용한 소스들을 찾을 수 있습니다. SVG에 관한 또 다른 소개는 W3C의 <a class="external external-icon" href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html" title="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html">SVG Primer</a>에서 제공됩니다.</p> + +<div class="note">본 튜토리얼은 개발 초기 단계에 있습니다. 가능하다면, 본 문서 작성에 참여하여, 한 두 단락을 작성하여 도움을 주기 바랍니다. 한 페이지 전체를 작성한다면 더욱 좋습니다!</div> + +<h5 id="SVG_소개_목록">SVG 소개 목록</h5> + +<ul> + <li><a href="/ko/docs/Web/SVG/Tutorial/Introduction" title="ko/docs/Web/SVG/Tutorial/Introduction">소개</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Getting_Started" title="ko/docs/Web/SVG/Tutorial/Getting_Started">시작하기</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Positions" title="ko/docs/Web/SVG/Tutorial/Positions">위치</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Basic_Shapes" title="ko/docs/Web/SVG/Tutorial/Basic_Shapes">기본 형태</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Paths" title="ko/docs/Web/SVG/Tutorial/Paths">패스</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Fills_and_Strokes" title="ko/docs/Web/SVG/Tutorial/Fills_and_Strokes">채우기 및 선 그리기</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Gradients" title="ko/docs/Web/SVG/Tutorial/Gradients">그라디언트</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Patterns" title="ko/docs/Web/SVG/Tutorial/Patterns">패턴</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Texts" title="ko/docs/Web/SVG/Tutorial/Texts">텍스트</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Basic_Transformations" title="ko/docs/Web/SVG/Tutorial/Basic_Transformations">기본 변형</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Clipping_and_masking" title="ko/docs/Web/SVG/Tutorial/Clipping_and_masking">클리핑 및 마스킹</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Other_content_in_SVG" title="ko/docs/Web/SVG/Tutorial/Other content in SVG">SVG 안의 다른 컨텐츠</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Filter_effects" title="ko/docs/Web/SVG/Tutorial/Filter effects">필터 효과</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_fonts" title="ko/docs/Web/SVG/Tutorial/SVG fonts">SVG 폰트</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_Image_Tag" title="ko/docs/Web/SVG/Tutorial/SVG Image Tag">SVG 이미지 태그</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/Tools_for_SVG" title="ko/docs/Web/SVG/Tutorial/Tools_for_SVG">SVG를 위한 도구들</a></li> + <li><a href="/ko/docs/Web/SVG/Tutorial/SVG_and_CSS">SVG와 CSS</a></li> +</ul> diff --git a/files/ko/web/svg/tutorial/introduction/index.html b/files/ko/web/svg/tutorial/introduction/index.html new file mode 100644 index 0000000000..05041323fa --- /dev/null +++ b/files/ko/web/svg/tutorial/introduction/index.html @@ -0,0 +1,49 @@ +--- +title: 소개 +slug: Web/SVG/Tutorial/Introduction +tags: + - SVG + - 'SVG:튜토리얼' + - 가이드 + - 초보자 + - 튜토리얼 +translation_of: Web/SVG/Tutorial/Introduction +--- +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> + +<p><img alt="" class="internal" src="/@api/deki/files/348/=SVG_Overview.png" style="float: right;"><a href="/ko/SVG" title="ko/SVG">SVG</a>는 <a href="/ko/XHTML" title="ko/XHTML">XHTML</a>과 비슷한 <a href="/ko/XML" title="ko/XML">XML</a> 언어로 오른쪽에 있는 것과 같은 그래픽을 그리는 데 사용된다. SVG 이미지는 필요한 모든 선과 모양을 직접 일일이 지정하거나, 이미 존재하는 래스터 이미지를 수정하거나, 이 두 가지 방법을 조합해서 만들 수 있다. 이미지와 그 구성요소들은 변형되고, 조합되고, 필터링될 수 있으며, 이를 통해 원래의 형태를 완전히 바꿀 수도 있다.</p> + +<p>SVG는 비슷한 경쟁 포맷들이 <a class="external" href="http://www.w3.org" title="ko/W3C">W3C</a>에 제출되었지만 완전히 승인되지는 않았던 1999년에 등장했다. 명세는 오랫동안 존재해 왔지만 웹 브라우저에서 느리게 받아들여졌기 때문에, 웹 문서에서 바로 SVG를 포함하는 컨텐츠는 2009년까지도 많지 않았다. 사용할 수 있는 구현조차도 경쟁기술인 <a href="/ko/HTML/Canvas" title="ko/HTML/Canvas">HTML5 캔버스</a>나 (애플리케이션 인터페이스로서) 어도비 플래시보다 느린 편이다. SVG는 캔버스나 플래시와 비교했을 때 <a href="/ko/docs/Web/API">DOM 인터페이스</a>를 사용할 수 있는 점과 서드파티 확장을 필요로 하지 않는 이점을 가지고 있다. SVG를 활용할 지는 사용자의 목적에 달려있다.</p> + +<p><a href="https://caniuse.com/#feat=svg">Can I Use...</a>에서 확인할 수 있듯이, SVG 지원은 2009년부터 확대되어 왔다.</p> + +<h3 id="기본적인_요소들">기본적인 요소들</h3> + +<p><a href="/ko/docs/Web/HTML">HTML</a>은 헤더, 문단, 표와 같은 요소들을 제공한다. SVG도 마찬가지로 원, 사각형, 간단한 곡선과 복잡한 곡선을 그릴 수 있는 요소들을 제공한다. 간단한 SVG 문서는 {{ SVGElement('svg') }} 루트 요소와 그래픽을 구성하기 위한 몇몇 기본 도형들로 구성된다. 또한 {{ SVGElement('g') }} 요소를 통해 간단한 모양들을 조합할 수 있다.</p> + +<p>이를 통해서 SVG 이미지는 아주 복잡해질 수도 있다. SVG는 그라디언트, 회전, 필터 효과, 애니메이션, 자바스크립트를 통한 조작을 지원한다. 하지만 SVG의 이러한 추가적인 기능들은 그래픽 영역을 정의하는 비교적 작은 요소들의 집합에 의존하고 있다.</p> + +<h3 id="Before_you_start" name="Before_you_start">시작하기 전에</h3> + +<p><a class="external" href="http://www.inkscape.org/">잉크스케이프(Inkscape)</a>를 비롯해 SVG를 네이티브 포맷으로 활용하는 무료 드로잉 애플리케이션들이 있다. 하지만 이 튜토리얼에서는 순수하게 XML과 (독자가 선택한) 텍스트 에디터만을 사용한다. 이는 SVG의 내부 구조에 대한 이해를 돕기 위함이며, 이렇게 하기 위해서는 직접 마크업 언어를 경험해보는 것이 무엇보다 중요하다. SVG를 배우는 이유를 되새겨보자. 모든 SVG 뷰어가 같은 방식으로 구현되어 있지는 않기 때문에, 어떤 애플리케이션에서 잘 보여지도록 작성된 SVG가 다른 애플리케이션에서는 의도한 대로 작동하지 않을 수도 있다. 이는 SVG 명세나 SVG와 함께 사용되는 <a href="/ko/JavaScript">자바스크립트</a>나 <a href="/ko/CSS" title="ko/CSS">CSS</a>를 지원하는 수준이 서로 상이하기 때문에 발생하는 문제이다.</p> + +<p>SVG는 모든 모던 웹 브라우저에서 지원하고 있으며, 이전부터 지원해오던 경우도 있다. <a href="http://caniuse.com/svg">Can I use</a>에서 SVG 지원 현황을 표로 확인할 수 있다. 파이어폭스는 1.5 버전에서부터 SVG를 지원해오고 있으며, 매 버전이 나올 때마다 SVG 지원 범위도 넓어지고 있다. 바라건대 이 튜토리얼과 MDN 문서가 개발자들이 Gecko와 다른 주요 구현체들의 차이를 이해하는 데 도움이 되길 바란다.</p> + +<p>SVG를 시작하기에 앞서, 기초적인 XML 문법이나 <abbr title="HyperText Markup Language">HTML</abbr> 같은 다른 마크업 언어를 이해할 필요가 있다. XML에 익숙하지 않다면 다음 사항들을 유념하기 바란다.</p> + +<ul> + <li>XML은 (HTML과 달리) 대소문자를 구분하는 언어이므로 SVG 요소와 속성은 반드시 예제에 보이는 대로 입력해야 한다.</li> + <li>SVG에서 속성 값은 숫자라고 할지라도 반드시 따옴표로 둘러싸야 한다.</li> +</ul> + +<p>SVG의 명세는 아주 길다. 이 튜토리얼에서는 기초적인 부분만을 다룬다. 이미 SVG에 익숙하다면 <a href="/ko/SVG/Element" title="ko/SVG/Element">요소 레퍼런스</a>나 <a href="/ko/docs/DOM/DOM_Reference#SVG_interfaces" title="ko/SVG/Interface">인터페이스 레퍼런스</a>에서 필요한 부분을 찾아보면 된다.</p> + +<h3 id="SVG의_종류">SVG의 종류</h3> + +<p>2003년에 권고가 된 후 최신의 완전한(full) SVG 버전은 1.1이다. 1.1은 1.0을 기반으로 작성되었으나 구현을 쉽게 하기 위해 좀 더 모듈화되었다. <a href="http://www.w3.org/TR/SVG/">SVG 1.1 두번째 에디션</a>은 2011년에 권고되었다. 완전한 SVG 1.2가 SVG의 다음 주요 릴리즈였다. 1.2 대신 현재 활발히 개발중인 <a href="http://www.w3.org/TR/SVG2/">SVG 2.0</a>으로 넘어갈 것이다. SVG 2.0에서는 CSS 3과 마찬가지로 구성요소들이 느슨히 결합된 명세들로 분리될 것이다.</p> + +<p>완전한 SVG 권고와는 별도로 W3C 워킹 그룹에서는 2003년에 SVG Tiny와 SVG Basic을 내놓았다. SVG Tiny와 SVG Basic은 모바일 기기를 위한 것이다. 먼저 SVG Tiny에 따르면 적은 리소스를 가진 작은 기기에서도 그래픽을 생성할 수 있어야 한다. SVG Basic은 완전한 SVG 명세의 많은 부분을 지원하지만 구현하기 어렵거나 애니메이션과 같이 무거운 렌더 작업은 포함하지 않는다. 2008년에는 SVG Tiny 1.2가 W3C 권고가 되었다.</p> + +<p>다중 페이지 지원 및 더 나은 색상 관리를 위한 SVG 프린트 명세도 계획되어 있었다. 이 작업은 현재 진행되지 않고 있다.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial", "Web/SVG/Tutorial/Getting_Started") }}</p> diff --git a/files/ko/web/svg/tutorial/paths/index.html b/files/ko/web/svg/tutorial/paths/index.html new file mode 100644 index 0000000000..4280d78df0 --- /dev/null +++ b/files/ko/web/svg/tutorial/paths/index.html @@ -0,0 +1,216 @@ +--- +title: 패스 +slug: Web/SVG/Tutorial/Paths +tags: + - SVG + - 학습서 +translation_of: Web/SVG/Tutorial/Paths +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> + +<p><a href="/en-US/Web/SVG/Element/path"><code><path></code></a> 엘리먼트는 SVG <a href="/ko/docs/Web/SVG/Tutorial/Basic_Shapes">기본 도형</a> 라이브러리에서 가장 강력한 엘리먼트이다. 선과 곡선, 호 등 다양한 형태를 그릴 수 있다.</p> + +<p>패스는 여러 개의 직선과 곡선을 합쳐서 복잡한 도형을 그릴 수 있게 해준다. 직선으로만 이루어진 복잡한 도형은 <a href="/en-US/docs/Web/SVG/Tutorial/Basic_Shapes#Polyline">polylines</a>으로도 그릴 수 있지만, 곡선을 묘사할 때 polylines은 패스로 그린 도형에 비해 더 많은 직선이 필요에 확대가 잘 되지 않을 수 있다. 그렇기에 SVG를 그릴 때 패스에 대해 이해하는 것은 매우 중요하다고 할 수 있다. 복잡한 패스를 XML 편집기 또는 일반적인 텍스트 에디터로 그리는 것은 권장하지 않지만, SVG가 표시될 때 문제점을 찾고 고치는 데는 충분히 도움이 될 것이다.</p> + +<p>패스의 모양은 {{ SVGAttr("d") }} 속성 하나로 정의된다(<a href="/en-US/docs/">basic shapes</a> 참조). <code>"d"</code> 속성은 여러 개의 명령어와 그 파라미터들로 이루어진다.</p> + +<p>각각 명령은 특정 알파벳으로 시작한다. 예를 들면 현재 그려지는 위치를 XY 좌표계의 (10, 10)으로 이동할 때 "Move To" 명령을 사용하게 되는데, 이 명령은 알파벳 M으로 호출한다. SVG 처리기가 이 문자를 읽게 되면 다른 위치로 이동하라는 명령으로 이해하게 된다. 즉, (10, 10)으로 이동하려면 명령어 "M 10 10"을 쓰면 된다. 이후에 처리기는 다음 명령어를 읽기 시작한다.</p> + +<p>모든 명령어는 2가지 변형이 존재하는데, 알파벳이 <strong>대문자</strong>일 경우(예를 들면 대문자 M), 뒤따르는 좌표는 페이지의 절대 좌표를 참조하며, <strong>소문자</strong> 알파벳(m)일 경우 마지막 위치에 대한 상대적 좌표로 참조된다.</p> + +<p>"d" 속성의 좌표는<strong> 절대 단위가 붙지 않으며,</strong> 패스의 위치나 형태가 어떻게 변형될 수 있는지는 나중에 배우도록 한다.</p> + +<h2 id="선(Line)_명령어">선(Line) 명령어</h2> + +<p><code><path></code> 노드에는 다섯 개의 선 명령어가 있다. 이름에서 알 수 있듯이 각각의 명령어는 두 점 사이에 선을 그리는 역할을 한다. 첫 번째 명령어는 'Move To(이동하기)' 혹은 'M' 이다. 이 명령어는 두 개의 파라미터로 x와 y 좌표를 받는다. 그리기 커서가 이미 페이지의 다른 곳에 있었더라도 두 점 사이에 점이 그려지지는 않는다. 'Move To' 명령어는 다음과 같이 패스의 맨 처음에 와서 그리기를 시작할 위치를 지정한다:</p> + +<pre> M x y +</pre> + +<p>혹은</p> + +<pre> m dx dy</pre> + +<p>아래의 예제에서는 좌표 (10,10)에만 점을 찍었다. 일반적으로 패스를 그릴 때는 이 점이 나타나지 않는다는 점에 주의해야 한다.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/45/=Blank_Path_Area.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10"/> + + <!-- 점 --> + <circle cx="10" cy="10" r="2" fill="red"/> + +</svg></pre> + +<p>선을 그리는 명령어는 세 가지가 있다. 가장 일반적인 것은 'L'이라 부르는 "Line To(선 그리기)" 명령어이다. L 명령어는 x, y라는 두 개의 파라미터를 받아서 현재 위치에서 새 위치로 선을 긋는다.</p> + +<pre> L x y (혹은 l dx dy) +</pre> + +<p>가로선과 세로선을 그리는 축약 명령어도 있다. 'H'는 가로선을 그리고, 'V'는 세로선을 그릴 수 있다. 두 명령어는 한 좌표축으로만 이동하므로 하나의 파라미터만을 받는다.</p> + +<pre> H x (혹은 h dx) + V y (혹은 v dy) +</pre> + +<p>도형 그리기부터 시작해 보자. 사각형을 그려볼 텐데(<code><rect></code>를 이용해 쉽게 그릴 수도 있다), 시작점부터 가로, 세로선도 함께 사용되었다.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/292/=Path_Line_Commands.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 H 90 V 90 H 10 L 10 10"/> + + <!-- 점 --> + <circle cx="10" cy="10" r="2" fill="red"/> + <circle cx="90" cy="90" r="2" fill="red"/> + <circle cx="90" cy="10" r="2" fill="red"/> + <circle cx="10" cy="90" r="2" fill="red"/> + +</svg></pre> + +<p>'Z'라는 "Close Path(패스 닫기)" 명령어를 통해 쉽게 패스를 마무리할 수 있다. 이 명령어는 현 위치에서 시작점으로 직선을 그린다. 항상은 아니지만 패스의 끝에 자주 쓰인다. 대문자와 소문자 사이의 차이는 없다.</p> + +<pre> Z (혹은 z) +</pre> + +<p>위 코드를 짧게 줄여보면:</p> + +<pre class="brush: xml"><path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/> +</pre> + +<p>위의 형태를 상대좌표로도 표현해볼 수 있다. 상대좌표 명령어는 앞서 기술된 바와 같이 소문자로 되어 있는 명령어인데, 패스를 움직일 때 정확한 위치를 지정해주는 것이 아니라 현재 위치로부터 얼마나 움직여야 하는지를 기술해준다. 예를 들면 위 80x80 상자를 아래와 같이 표현할 수 있다.</p> + +<pre class="brush: xml"><path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/> +</pre> + +<p>여기서 패스는 (10,10)에서 시작하여 수평으로 80포인트<strong>만큼 오른쪽</strong>으로 움직이고 수직으로 80포인트<strong>만큼 아래로</strong> 이동하고 다시 시작점으로 이동하게 된다.</p> + +<p>위 예제의 모양을 만드는 데는 <polygon> 태그나 <polyline> 태그가 더 간편해보일 수 있지만, 패스는 SVG를 그릴 때 자주 사용되므로 개발자 입장에서 더 편할 수도 있다. 성능 면에서는 둘 모두 비슷비슷하니, 편한 것으로 사용하자.</p> + +<h2 id="곡선_(Curve)_명령어">곡선 (Curve) 명령어</h2> + +<p>부드러운 곡선을 그릴 수 있는 세 가지 명령어가 있다. 이 중 두 가지는 '베지어 곡선'이며, 나머지 하나는 원의 조각인 '호'이다. 베지어 곡선은 아마 일러스트레이터나 포토샵, 잉크스케이프 등의 벡터 그래픽 기반의 툴을 통해서 경험해봤을 것이다. 베지어 곡선의 수학적 배경은 <a class="external" href="https://en.wikipedia.org/wiki/B%C3%A9zier_curve">위키피디아</a>를 참조하길 바란다. 베지어 곡선의 종류는 무한하지만, 패스 엘리먼트에서는 가장 간단한 두 종류만을 지원한다. 하나는 'C'라고 부르는 3차(Cubic) 베지어 곡선이고, 다른 하나는 'Q'로 사용되는 2차(Quadratic) 베지어 곡선이다.</p> + +<h3 id="베지어_곡선">베지어 곡선</h3> + +<p>3차 베지어 곡선인 'C'는 조금 복잡한 곡선이다. 3차 베지어 곡선은 선을 잇는 두 점에 하나씩 제어점을 가지고 있다. 그러므로 3차 베지에 곡선을 그리려면 총 세 개의 좌표가 필요하다.</p> + +<pre> C x1 y1, x2 y2, x y (혹은 c dx1 dy1, dx2 dy2, dx dy) +</pre> + +<p>마지막으로 지정된 좌표 (x, y)는 곡선의 끝점이다. 나머지 두 개는 제어점이며, 첫 번째 제어점은 (x1, y1), 두 번째 제어점은 (x2, y2)이다. 제어점은 기본적으로 시작점과 끝점에서 곡선의 방향을 기술한다. 베지어 함수는 각 제어점의 방향을 이용해 부드러운 곡선을 만드는 기능을 한다.</p> + +<p><img alt="Cubic Bézier Curves with grid" class="internal" src="https://mdn.mozillademos.org/files/10401/Cubic_Bezier_Curves_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + + <path d="M10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/> + <path d="M70 10 C 70 20, 120 20, 120 10" stroke="black" fill="transparent"/> + <path d="M130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/> + <path d="M10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/> + <path d="M70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/> + <path d="M130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/> + <path d="M10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/> + <path d="M70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/> + <path d="M130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> + +</svg> +</pre> + +<p>위 예제에서는 아홉 개의 베지어 곡선을 그린다. 왼쪽으로 갈수록 곡선이 수평에 가까워지고, 오른쪽으로 갈수록 제어점이 원점에서 멀어진다. 여기서 주목해야 할 점은 곡선이 첫 번째 제어점 방향으로 시작한 다음, 두 번째 제어점 방향으로 구부러지고 있다는 것이다.</p> + +<p>여러 베지어 곡선을 연결하여 확장된 곡선 형태를 만들 수도 있다. 한 선의 제어점을 다른 선의 제어점과 반대 방향으로 그어서 완만한 경사를 만들어야 할 때가 많은데, 이 경우에는 간단한 형태의 3차 베지어 곡선 명령어인 'S' (혹은 's')를 사용해서 구현할 수 있다.</p> + +<pre> S x2 y2, x y (혹은 s dx2 dy2, dx dy) +</pre> + +<p><code>S</code>는 위와 같은 형태의 곡선을 그리지만, 다른 <code>S</code>나 <code>C</code> 명령어 다음에 올 경우 첫 번째 제어점은 이전에 사용했던 제어점을 뒤집은 것으로 간주된다. <code>S</code> 명령어가 다른 <code>S</code>나 <code>C</code> 명령어 다음에 오지 않을 경우에는 현재 커서 위치가 첫 번째 제어점으로 사용되며, 이 경우에 그려지는 결과는 Q 명령어로 같은 파라미터를 사용해서 그린 결과와 같게 된다. 아래에 이 명령어의 예제가 있으며, 왼쪽의 미리보기에서 패스에 명시적으로 표시된 제어점은 빨간색, 생략된 제어점은 파란색으로 표시한다.</p> + +<p><img alt="ShortCut_Cubic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10405/ShortCut_Cubic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>3차 베지어 곡선보다 간단한 다른 형태의 곡선은 'Q'라고 부르는 2차 베지어 곡선이며, 하나의 제어점이 시작점과 끝점의 방향을 모두 결정한다. 이 명령어는 매개변수로 제어점과 곡선의 끝점 2개를 받는다.</p> + +<pre> Q x1 y1, x y (혹은 q dx1 dy1, dx dy) +</pre> + +<p><img alt="Quadratic Bézier with grid" class="internal" src="https://mdn.mozillademos.org/files/10403/Quadratic_Bezier_with_grid.png" style="float: right; height: 160px; width: 190px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>3차 베지어 곡선과 같이 2차 베지어 곡선을 연결하는 단축 명령어가 있으며, T라고 부른다.</p> + +<pre> T x y (혹은 t dx dy) +</pre> + +<p>이 축약 명령어는 이전에 사용한 제어점으로부터 새로운 제어점을 만들어낸다. 즉, 처음에 제어점 하나만을 기술하면 끝점만을 계속 이어서 꽤 복잡한 도형을 만들 수 있다.</p> + +<div class="note"> +<p>Q나 T 명령어 다음에 올 때만 적용된다. 그렇지 않을 경우 제어점은 시작점의 좌표로 간주되며, 직선만 그릴 수 있게 된다.</p> +</div> + +<p><img alt="Shortcut_Quadratic_Bezier_with_grid.png" class="internal" src="https://mdn.mozillademos.org/files/10407/Shortcut_Quadratic_Bezier_with_grid.png" style="float: right; height: 158px; width: 188px;"></p> + +<pre class="brush: xml"><svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/> +</svg></pre> + +<p>두 종류의 곡선이 비슷한 결과를 만들어내긴 하지만, 3차 곡선의 경우 모양을 더 자유롭게 수정할 수 있다. 둘 중 어느 것이 좋은지는 그때그때 다르며, 선 모양이 얼마나 대칭적인지에 따라 달라진다.</p> + +<h3 id="Arcs" name="Arcs">원호</h3> + +<p>SVG로 그릴 수 있는 다른 형태의 곡선으로는 A라고 부르는 호(arc)가 있다. 호는 원이나 타원의 일부분을 말한다. x, y축 반지름이 주어졌을 때, (두 점이 충분히 가깝다고 가정할 때) 두 점을 연결할 수 있는 타원은 2개가 있으며, 각각의 타원에서 두 점을 잇는 경로 또한 2개씩 있기 때문에 어떤 상황에서든 네 종류의 호를 그릴 수 있다. 이러한 성질 때문에 호 명령어는 꽤 많은 파라미터를 받는다:</p> + +<pre> A rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 x y + a rx ry x축-회전각 큰-호-플래그 쓸기-방향-플래그 dx dy +</pre> + +<p>A 명령어는 일단 x축, y축 반지름을 매개변수로 받는다. 혹시 필요하다면 <a href="/ko/docs/Web/SVG/Element/ellipse">ellipse</a> 문서에서 두 매개변수가 어떻게 작동하는지 확인해볼 수 있다. 세 번째 매개변수는 호의 회전각을 기술한다. 이는 아래 예제에서 잘 확인할 수 있다.</p> + +<p><img alt="SVGArcs_XAxisRotation_with_grid" class="internal" src="https://mdn.mozillademos.org/files/10409/SVGArcs_XAxisRotation_with_grid.png" style="float: right; height: 201px; width: 200px;"></p> + +<pre class="brush: xml"><svg width="320" height="320" xmlns="http://www.w3.org/2000/svg"> + <path d="M10 315 + L 110 215 + A 30 50 0 0 1 162.55 162.45 + L 172.55 152.45 + A 30 50 -45 0 1 215.1 109.9 + L 315 10" stroke="black" fill="green" stroke-width="2" fill-opacity="0.5"/> +</svg></pre> + +<p>이 예제는 페이지를 대각선으로 가로질러 이동하는 패스인데, 그 중간에 두 개의 타원형 호가 절단되어 있다(x축 반지름 = 30, y축 반지름 = 50). 첫 번째는 x축 회전각이 0이므로 호의 기준이 되는 타원(회색으로 표시)은 위아래로 똑바로 서 있다. 두 번째 호는 x축 회전각이 -45도이므로 회전을 해서 예제에서 보이는 것처럼 타원의 단축과 패스 방향이 나란해졌다.</p> + +<p>위에서 언급한 네 가지 경로는 이어지는 두 개의 매개변수 플래그에 의해 결정된다. 앞서 언급했듯이, 두 점을 잇는 타원도 2개, 각각 취할 수 있는 방향도 2개이므로 모두 네 가지 경로가 가능하다. 첫 번째 인수는 큰 호 플래그(large-arc-flag)이며, 중심각이 180도 이상이 될지를 결정한다. 결국, 이 플래그는 호가 주어진 원의 어느 방향을 따라 돌지를 결정한다. 두 번째 인수는 쓸기 방향 플래그(sweep-flag)이며, 호가 이동해야 할 각이 음인지 양인지를 결정한다. 이 각은 본질적으로 두 개의 원 중 어느 쪽을 따를지를 결정한다. 아래 예는 네 가지 가능한 조합을 각 사례별로 두 개의 원과 함께 표시하고 있다.</p> + +<p><img alt="" class="internal" src="/@api/deki/files/345/=SVGArcs_Flags.png" style="float: right;"></p> + +<pre class="brush: xml"><svg width="325" height="325" xmlns="http://www.w3.org/2000/svg"> + <path d="M80 80 + A 45 45, 0, 0, 0, 125 125 + L 125 80 Z" fill="green"/> + <path d="M230 80 + A 45 45, 0, 1, 0, 275 125 + L 275 80 Z" fill="red"/> + <path d="M80 230 + A 45 45, 0, 0, 1, 125 275 + L 125 230 Z" fill="purple"/> + <path d="M230 230 + A 45 45, 0, 1, 1, 275 275 + L 275 230 Z" fill="blue"/> +</svg></pre> + +<p><span id="result_box" lang="ko"><span>마지막 두 개의 매개변수는 호가 끝나는 x와 y 좌표를 지정한다. </span><span>호는 도면에서 원 또는 타원 조각을 쉽게 만들 수 있는 방법이다. </span><span>예를 들어 원그래프는 각 조각마다 다른 호가 필요하다.</span></span></p> + +<p>원을 한 바퀴 도는 패스의 경우 시작점과 끝점이 같으므로 선택할 수 있는 원이 무한히 있으며, 그러므로 실제 패스가 정의되지 않는다. 이때는 시작점과 끝점을 살짝 비뚤어지게 배치하고 이 둘을 다른 패스 선으로 마저 이음으로써 비슷하게 만들 수 있지만, 이때는 실제 원이나 타원 노드를 쓰는 것이 쉬울 때가 많다.</p> + +<p><a href="/ko/docs/Web/HTML/Canvas">캔버스</a>에서 SVG로 넘어오는 사람에게는 호가 가장 배우기 어려울 수도 있지만, 그런 만큼 강력하기도 하다. 다음 반응형 예제를 보면 SVG 호의 개념을 이해하는 데 도움이 될 것이다. <a href="http://codepen.io/lingtalfi/pen/yaLWJG">http://codepen.io/lingtalfi/pen/yaLWJG</a> (크롬과 파이어폭스로만 테스트했으므로 일부 브라우저에서 동작하지 않을 수 있음)</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Basic_Shapes", "Web/SVG/Tutorial/Fills_and_Strokes") }}</p> diff --git a/files/ko/web/svg/tutorial/patterns/index.html b/files/ko/web/svg/tutorial/patterns/index.html new file mode 100644 index 0000000000..025c9ad3c8 --- /dev/null +++ b/files/ko/web/svg/tutorial/patterns/index.html @@ -0,0 +1,72 @@ +--- +title: 패턴 +slug: Web/SVG/Tutorial/Patterns +tags: + - 패턴 +translation_of: Web/SVG/Tutorial/Patterns +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p> + +<h2 id="패턴">패턴</h2> + +<p>패턴은 SVG에 사용할 보다 복잡한 채움 형태의 하나다. 또한 강력하다, 그래서 관련해서 얘기하고 적어도 기본을 익히는 것은 가치가 있다. 색퍼짐(gradients)처럼, 이 {{SVGElement('pattern')}} 요소도 SVG 파일의 <code><defs></code> 섹션에 놓여야 한다.</p> + +<pre class="brush: html"><svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> + <defs> + <linearGradient id="Gradient1"> + <stop offset="5%" stop-color="white"/> + <stop offset="95%" stop-color="blue"/> + </linearGradient> + <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> + <stop offset="5%" stop-color="red"/> + <stop offset="95%" stop-color="orange"/> + </linearGradient> + + <pattern id="Pattern" x="0" y="0" width=".25" height=".25"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> + </defs> + + <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/> +</svg></pre> + +<p>{{ EmbedLiveSample('Patterns','220','220','/files/725/SVG_Pattern_Example.png') }}</p> + +<p>패턴 요소 안에는 앞서 포함시킨 다른 기본 도형(shape)의 뭐라도 포함시킬 수 있다. 그리고 그것 각각에 앞서 배운 색퍼짐(gradients)이나 투명(opacity) 등으로 스타일을 줄 수 있다. 여기서 우리는 두개의 사각형(둘은 겹쳐 있고, 하나가 다른 것보다 2배 크기다. 이것이 패턴 전체를 채운다)과 하나의 동그라미를 그려 넣었다.</p> + +<p>패턴 관련 복잡한 작업이 단위 체계와 그 크기를 정하는 일이다. 위 예제에서, 우리는 패턴의 <code>폭(width)</code>과 <code>높이(height)</code> 속성을 정의했다. 이것들은 반복되는 패턴들이 서로 얼마나 떨어지는지를 나타내는 값이다. 이 사각형의 시작위치가 도면의 어딘가로부터 원하는 만큼 밀려나도록 하는 <code>x</code>와 <code>y</code> 속성도 가능한다. 이들이 여기에 사용된 이유는 아래에서 설명한다.</p> + +<p>패턴에도 앞서 봤던 <code>gradientUnits</code>같은 속성이 있다. <code>patternUnits</code>는 단위를 명시한다. 기본값은 마찬가지로 "objectBoundingBox"이다. 그래서 패턴이 적용될 객체의 폭/높이가 1로 표현된다. 그러므로 이 경우, 폭과 높이가 0.25로 설정되었으므로 우리가 원한 것은 수평과 수직으로 패턴이 4번 반복되는 것이다. 그 말은 패턴의 크기는 전체 박스 크기의 단지 0.25만큼이라는 것이다.</p> + +<p>색퍼짐(gradients)과 달리 패턴은 두번째 속성인 <code>patternContentUnits</code>을 가진다. 이것은 패턴 요소 내부의 기본 도형에 적용되는 단위 체계다. 기본값은 "userSpaceOnUse"로 <code>patternUnits</code> 속성과 반대다. 이 말은 이들 속성들(<code>patternContentUnits</code>과 <code>patternUnits</code>)을 따로 지정하지 않으면, 우리가 패턴 내부에 그리는 도형들은 패턴 요소가 사용하는 것과 다른 좌표 체계로 그려진다는 것이다. 이것은 직접 작성할 때 살짝 혼란스러울 수 있다는 것이다. 위 예제에서 이 일을 제대로 하려면, 우리의 박스 크기(200픽셀)와 우리가 수평과 수직으로 4번 반복되기를 원한다는 것을 감안해야 한다. 이 말은 각 패턴은 50x50의 정사각형이라는 것이다. 그래서 패턴 안, 두개의 사각형과 하나의 동그라미는 50x50 박스에 맞는 크기로 됐던 것이다. 이 박스 바깥에 그려지는 것들은 그게 뭐든 보이지 않을 것이다. 이 패턴은 또한 10 픽셀 만큼 밀려나야 한다 그래서 이것은 우리의 상자 왼쪽 위에서 시작할 것이다. 그래서 패턴의 x와 y 속성은 10/200 = 0.05로 조정 되어져야 한다.<br> + (역주: 예제의 x, y는 0인데, 설명은 계속 10인 것처럼 하고 있다. 뭔가 오류가 있는 것 같다)</p> + +<p>여기서 주의사항은 객체가 크기를 바꾸면 패턴도 그에 맞게 조정되지만, 그 내부는 그렇지 않다는 거다. 그래서 우리는 여전히 4번 반복된 패턴을 가지겠지만 내부의 객체들은 같은 크기를 유지할 것이고 그들 간에 커다란 빈 공간을 직면할 것이다. <code>patternContentUnits</code> 속성을 바꿔서 우리는 모든 요소가 같은 단위 체계에 놓이도록 할 수 있다:</p> + +<pre class="brush: xml"> <pattern id="Pattern" width=".25" height=".25" patternContentUnits="objectBoundingBox"> + <rect x="0" y="0" width=".25" height=".25" fill="skyblue"/> + <rect x="0" y="0" width=".125" height=".125" fill="url(#Gradient2)"/> + <circle cx=".125" cy=".125" r=".1" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> + +<p>이제 패턴 내용물은 패턴과 같은 단위 체계라, 패턴이 바른 위치에서 시작하게 하려면 시작위치를 밀어내지 않아야 한다. 그리고 객체의 크기가 더 커지면 패턴은 자동적으로 조정되어 같은 수의 객체와 같은 회수로 반복될 것이다. 이것은 객체의 크기가 변했을 때, 패턴의 크기를 그대로 유지하면서 그냥 반복을 더해서 박스를 채우는 "userSpaceOnUse" 체계와 대조적이다.</p> + +<p><span id="result_box" lang="ko"><span>Gecko에서 반지름이 0.075보다 작은 동그라미를 </span></span><span lang="ko"><span>그리는 데 어려움이 있다(현재 이것이 패턴 요소에서의 버그인지 아닌지는 알 수 없다).</span> <span>이 문제를 해결하려면 </span>꼭 해야 하는 것이 아니라면 <span>"objectBoundingBox" 단위에서 그리는 것을 피하는 것이 아마 최선일 것이다.</span></span></p> + +<p><span id="result_box" lang="ko"><span>어느 것도 패턴을 생각할 때 일반적으로 생각하는 것이 아닙니다.</span> <span>패턴은 보통 크기가 정해지고, 객체의 모양과는 독립적으로 반복됩니다.</span> <span>이런 식으로 만들려면 패턴과 내용 둘다 현재의 사용자 공간에서 그려져야 한다. 객체를 다음처럼 하고, 도형을 바꾸지 않는다.</span></span></p> + +<pre class="brush: xml"> <pattern id="Pattern" x="10" y="10" width="50" height="50" patternUnits="userSpaceOnUse"> + <rect x="0" y="0" width="50" height="50" fill="skyblue"/> + <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/> + <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/> + </pattern> +</pre> + +<p>물론 나중에 개체 크기를 변경해도 패턴의 크기는 조정되지 않는다. 위의 세 가지 예는 아래 높이를 300px로 약간 늘린 직사각형에 보이고 있지만 이게 완벽한 그림이 아니고, 시스템에 따라 가능한 다른 요인이 있음을 밝혀 둔다.</p> + +<p><img alt="Image:SVG_Pattern_Comparison_of_Units.png" class="internal" src="/@api/deki/files/349/=SVG_Pattern_Comparison_of_Units.png"></p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Gradients", "Web/SVG/Tutorial/Texts") }}</p> diff --git a/files/ko/web/svg/tutorial/svg_image_tag/index.html b/files/ko/web/svg/tutorial/svg_image_tag/index.html new file mode 100644 index 0000000000..1fa061c57f --- /dev/null +++ b/files/ko/web/svg/tutorial/svg_image_tag/index.html @@ -0,0 +1,35 @@ +--- +title: SVG 이미지 요소 +slug: Web/SVG/Tutorial/SVG_Image_Tag +tags: + - 이미지 + - 학습서 +translation_of: Web/SVG/Tutorial/SVG_Image_Tag +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> + +<p>SVG {{ SVGElement("image") }} 요소는 비트맵 이미지를 SVG 객체와 함께 표시할 수 있도록 해 준다.</p> + +<p>이 기본 예제에서, {{ SVGAttr("href") }} 속성으로 참조된 a .jpg 이미지는 SVG 객체 내부에 표시될 것이다:</p> + +<pre class="brush: xml"><?xml version="1.0" standalone="no"?> +<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" + "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> +<svg width="5cm" height="4cm" version="1.1" + xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink"> + <image xlink:href="firefox.jpg" x="0" y="0" height="50px" width="50px"/> +</svg></pre> + +<p>다음 몇가지를 주의하라(<a class="external" href="http://www.w3.org/TR/SVG/struct.html#ImageElement" title="http://www.w3.org/TR/SVG/struct.html#ImageElement">W3 specs</a> 참조):</p> + +<ul> + <li> + <p>x 또는 y 속성을 설정하지 않으면 0이 된다.</p> + </li> + <li> + <p>height 또는 width 속성을 설정하지 않으면, 0이 된다.</p> + </li> + <li>height 또는 width 속성이 0이면 이미지는 표시되지 않을 것이다.</li> +</ul> + +<p>{{ PreviousNext("Web/SVG/Tutorial/SVG_Fonts", "Web/SVG/Tutorial/Tools_for_SVG") }}</p> diff --git a/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html b/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html new file mode 100644 index 0000000000..4e06135569 --- /dev/null +++ b/files/ko/web/svg/tutorial/svg_in_html_introduction/index.html @@ -0,0 +1,73 @@ +--- +title: SVG In HTML Introduction +slug: Web/SVG/Tutorial/SVG_In_HTML_Introduction +tags: + - SVG +translation_of: Web/SVG/Tutorial/SVG_In_HTML_Introduction +--- +<p> </p> +<h3 id=".EA.B0.9C.EC.9A.94" name=".EA.B0.9C.EC.9A.94">개요</h3> +<p>이 문서와 관련된 예제는 form의 배경 그림을 제공하기 위해서 inline <a href="ko/SVG">SVG</a>를 어떻게 사용하는지를 보여줍니다. 정규 XHTML을 작성하는 것과 같은 방식으로 그 그림들을 조작하기 위해 <a href="ko/JavaScript">JavaScript</a>와 <a href="ko/CSS">CSS</a>의 사용법도 설명합니다. 예제들은 XHTML(HTML이 아님)과 SVG integration을 지원하는 웹브라우져에서만 동작함을 유의하시기 바랍니다.</p> +<h3 id=".EC.86.8C.EC.8A.A4" name=".EC.86.8C.EC.8A.A4">소스</h3> +<p>예제에 대한 소스는 <a class="external" href="http://developer.mozilla.org/presentations/xtech2005/svg-canvas/SVGDemo.xml">여기</a>:</p> +<pre><html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>XTech SVG Demo</title> + <style> + stop.begin { stop-color:yellow; } + stop.end { stop-color:green; } + body.invalid stop.end { stop-color:red; } + #err { display:none; } + body.invalid #err { display:inline; } + </style> + <script> + function signalError() { + document.getElementById('body').setAttribute("class", "invalid"); + } + </script> +</head> +<body id="body" + style="position:absolute; z-index:0; border:1px solid black; left:5%; top:5%; width:90%; height:90%;"> + <form> + <fieldset> + <legend>HTML Form</legend> + <p><label>Enter something:</label> + <input type="text"/> + <span id="err">Incorrect value!</span></p> + <p><button onclick="signalError();">Activate!</button></p> + </fieldset> + </form> + <svg xmlns="http://www.w3.org/2000/svg" version="1.1" + viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice" + style="width:100%; height:100%; position:absolute; top:0; left:0; z-index:-1;"> + <linearGradient id="gradient"> + <stop class="begin" offset="0%"/> + <stop class="end" offset="100%"/> + </linearGradient> + <rect x="0" y="0" width="100" height="100" style="fill:url(#gradient)" /> + <circle cx="50" cy="50" r="30" style="fill:url(#gradient)" /> + </svg> +</body> +</html></pre> +<h3 id="Discussion" name="Discussion">Discussion</h3> +<p>위 페이지는 주로 정규 XHTML, CSS, JavaScript입니다. 다만 흥미로운 부분은 위 페이지에 포함되어 있는 <svg>원소입니다. 이 원소와 그 자식들은 SVG 네임스페이스 상에서 선언되어 있습니다. 이 원소는 하나의 색변화도(그라데이션)와 이 색변화도에 따라 내부가 채워진 두개의 도형을 포함하고 있습니다. 색변화도의 양끝의 색깔은 CSS에서 지정된 색을 가집니다. 만약 사용자가 form에 잘못된 내용을 입력하였다면 스크립트는 <body>태그에 <code>invalid</code>속성을 설정하고 스타일 규칙은 색변화도의 <code>end-stop</code>색을 빨간색으로 변경합니다. (나머지 스타일 규칙에 따라 에러 메시지가 출력됩니다.)</p> +<p>이 방식은 수고면에서 다음과 같은 특징을 가집니다:</p> +<ul> + <li>우리는 기존의 웹사이트들에서 이전부터 사용되어온 정규 XHTML의 form을 사용했으며 여기에 매력적이고 인터랙티브한 배경그림까지도 추가했습니다.</li> + <li>이 방식은 SVG를 지원하지 않는 웹브라우져와 하위 호완성을 가집니다; 단순히 이들 웹브라우져에서는 배경그림만 없을 뿐입니다.</li> + <li>단순한 방식이며 아주 잘 동작합니다.</li> + <li>그림은 동적으로 필요한 크기에 따라 영리하게 스스로 크기를 변경합니다.</li> + <li>HTML과 SVG 모두에게 적용될 수 있는 선언적 스타일 규칙들을 가질 수 있습니다.</li> + <li>같은 스크립트가 HTML과 SVG 모두를 조작할 수 있습니다.</li> + <li>문서는 완전히 표준에 기반하고 있습니다.</li> +</ul> +<h3 id="Details" name="Details">Details</h3> +<p><code>viewBox</code>속성은 SVG 그림의 좌표계에 상대적인 논리적 좌표계를 생성합니다. 이 경우 그림은 100x100크기의 뷰포트에 놓여집니다.</p> +<p><code>preserveAspectRatio</code>속성은 주어진 크기내에 그림을 넣을때 그림의 높이나 폭을 최대로 해서 주어진 크기에 맞게 그림을 맞추고 넘어가는 부분들을 잘라냄으로써 그림의 비율이 보존되도록 지정합니다.</p> +<p><code>style</code>속성은 SVG 원소를 form의 배경에 고정시킵니다.</p> +<h3 id="Related_Links" name="Related_Links">Related Links</h3> +<ul> + <li>Another SVG in XHTML example: <a href="ko/SVG/Namespaces_Crash_Course/Example">A swarm of motes</a></li> + <li><a class="external" href="http://svg-whiz.com/wiki/index.php?title=Inline_SVG">Inline SVG</a> page on SVG wiki</li> +</ul> +<p>{{ languages( { "pl": "pl/SVG_w_XHTML_-_Wprowadzenie", "fr": "fr/Introduction_\u00e0_SVG_dans_HTML", "ja": "ja/SVG_In_HTML_Introduction" } ) }}</p> diff --git a/files/ko/web/svg/tutorial/기본_도형/index.html b/files/ko/web/svg/tutorial/기본_도형/index.html new file mode 100644 index 0000000000..8169e4c890 --- /dev/null +++ b/files/ko/web/svg/tutorial/기본_도형/index.html @@ -0,0 +1,141 @@ +--- +title: 기본 도형 +slug: Web/SVG/Tutorial/기본_도형 +translation_of: Web/SVG/Tutorial/Basic_Shapes +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</p> + +<p>SVG 드로잉에는 몇 가지 기본 도형들이 있다. 도형들의 목적은 이름에서 명백하게 알 수 있다. 도형들의 위치와 크기를 지정하는 몇몇 속성들은 주어지지만, 여기에서 다뤄지지 않는 다른 속성들과 함께 더 정확하고 완전한 설명이 있는 레퍼런스를 첨부해 두겠다. 그러나, 대부분의 SVG 문서에서 사용되기 때문에 몇 가지 소개를 해줘야한다.</p> + +<h2 id="Basic_shapes" name="Basic_shapes">기본적인 도형들</h2> + +<p>도형을 삽입하기 위해서는 당신은 문서안에 요소를 만들어야 한다. 서로다른 요소들은 다른 모양에 해당하며, 서로 다른 속성들을 사용하여 해당 모양의 크기와 위치를 나타낸다. 일부는 다른 모양으로 생성 될 수 있다는 점에서 약간 중복되지만, 사용자의 편의를 위해 SVG 문서를 가능한 짧고 가독성있게 유지하기 위해서 모두 제공된다. 모든 기본 도형은 오른쪽 이미지에 표시된다. 기본 도형을 생성하는 코드는 다음과 같다:</p> + +<p><img alt="" class="internal" src="/@api/deki/files/359/=Shapes.png" style="float: right;"></p> + +<pre class="brush:xml"><?xml version="1.0" standalone="no"?> +<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg"> + + <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> + + <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/> + <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/> + + <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/> + <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" + stroke="orange" fill="transparent" stroke-width="5"/> + + <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" + stroke="green" fill="transparent" stroke-width="5"/> + + <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/> +</svg></pre> + +<div class="note"><strong>Note:</strong> <code>stroke</code>, <code>stroke-width</code> 그리고 <code>fill</code> 속성들은 튜토리얼 뒤쪽에서 설명한다.</div> + +<h3 id="Rectangles" name="Rectangles">Rectangles 사각형</h3> + +<p><a href="/en-US/Web/SVG/Element/rect" title="en-US/Web/SVG/Element/rect">rect</a> 요소는 당신이 생각하는 것과 일치하며 화면에 사각형을 그린다. 여기에는 화면상에서 직사각형의 위치와 모양을 제어하는 6가지 기본 속성만 있다. 앞서 보여준 이미지는 두 개의 rect 요소를 보여주며 약간 중복된다. 오른쪽에 있는 이미지는 rx 와 ry 속성이 설정되어 있어서 모서리가 둥글다. rx 와 ry 가 설정되지 않은 경우에는 기본값 0으로 들어간다.</p> + +<pre class="brush:xml"><rect x="10" y="10" width="30" height="30"/> +<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/></pre> + +<dl> + <dt>x</dt> + <dd>사각형의 좌측 상단의 x 값을 의미한다.</dd> + <dt>y</dt> + <dd>사각형의 좌측 상단의 y 값을 의미한다.</dd> + <dt>width</dt> + <dd>사각형의 폭을 나타낸다.</dd> + <dt>height</dt> + <dd>사각형의 높이를 나타낸다. </dd> + <dt>rx</dt> + <dd>사각형의 둥근 꼭짓점의 x 방향으로의 반지름이다.</dd> + <dt>ry</dt> + <dd>사각형의 둥근 꼭짓점의 y 방향으로의 반지름이다.</dd> +</dl> + +<h3 id="Circle" name="Circle">Circle 원</h3> + +<p>당신이 추측한 것 처럼, <a href="/en-US/Web/SVG/Element/circle" title="en-US/Web/SVG/Element/circle">circle</a> 요소는 화면에 원을 그린다. circle 요소에 실제로 적용할 수 있는 속성은 세 가지 뿐이다.</p> + +<pre class="brush:xml;gutter:false;"><circle cx="25" cy="75" r="20"/></pre> + +<dl> + <dt>r</dt> + <dd>원의 반지름을 의미한다.</dd> + <dt>cx</dt> + <dd>원의 중심 중 x 값을 의미한다.</dd> + <dt>cy</dt> + <dd>원의 중심 중 y 값을 의미한다.</dd> +</dl> + +<h3 id="Ellipse" name="Ellipse">Ellipse 타원</h3> + +<p><a href="/en-US/Web/SVG/Element/ellipse" title="en-US/Web/SVG/Element/ellipse">Ellipse</a>s은 원의 x와 y 반경 (수학자들은 장반경, 단반경 이라고 함)을 개별적으로 확장 할 수 있는 circle 요소의 좀 더 일반적인 형태이다.</p> + +<pre class="brush:xml;gutter:false;"><ellipse cx="75" cy="75" rx="20" ry="5"/></pre> + +<dl> + <dt>rx</dt> + <dd>타원의 x 방향으로의 반지름의 길이를 의미한다.</dd> + <dt>ry</dt> + <dd>타원의 y 방향으로의 반지름의 길이를 의미한다.</dd> + <dt>cx</dt> + <dd>타원의 중심 중 x 값을 의미한다.</dd> + <dt>cy</dt> + <dd>타원의 중심 중 y 값을 의미한다.</dd> +</dl> + +<h3 id="Line" name="Line">Line 선</h3> + +<p><a href="/en-US/Web/SVG/Element/line" title="en-US/Web/SVG/Element/line">Line</a>s은 단지 직선이다. line 요소는 선의 시작과 끝 지점을 지정하는 두 점을 속성으로 갖는다.</p> + +<pre class="brush:xml;gutter:false;"><line x1="10" x2="50" y1="110" y2="150"/></pre> + +<dl> + <dt>x1</dt> + <dd>점 1의 x 값이다.</dd> + <dt>y1</dt> + <dd>점 1의 y 값이다.</dd> + <dt>x2 </dt> + <dd>점 2의 x 값이다.</dd> + <dt>y2</dt> + <dd>점 2의 y 값이다.</dd> +</dl> + +<h3 id="Polyline" name="Polyline">Polyline</h3> + +<p><a href="/en-US/Web/SVG/Element/polyline" title="en-US/Web/SVG/Element/polyline">Polyline</a>s은 연결된 직선들의 그룹이다. 그 목록(직선들)은 꽤 길어질 수 있기 때문에 모든 포인트가 하나의 속성에 포함된다.</p> + +<pre class="brush:xml;gutter:false;"><polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/></pre> + +<dl> + <dt>points</dt> + <dd>포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다.</dd> +</dl> + +<h3 id="Polygon" name="Polygon">Polygon 다각형</h3> + +<p><a href="/en-US/Web/SVG/Element/polygon" title="en-US/Web/SVG/Element/polygon">Polygon</a>s은 점을 연결하는 직선으로 구성된다는 점에서 polyline과 매우 유사하다. 하지만 다각형의 경우, 자동으로 마지막 포인트로부터 첫 번째 포인트로 직선을 만들어서 닫힌 모양을 만든다. 사각형은 다각형의 하나이므로, 융통성있는 사각형을 필요로 하는 경우 polygon 요소를 사용해서 rect 요소를 만들 수 있다.</p> + +<pre class="brush:xml;gutter:false;"><polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180"/></pre> + +<dl> + <dt>points</dt> + <dd>포인트들의 목록, 각 숫자는 공백, 쉼표, EOL 또는 줄 바꿈 문자로 구분된다. 각 포인트는 반드시 x 좌표와 y 좌표를 가지고 있어야 한다. 따라서 포인트 목록 (0,0), (1,1) 및 (2,2)는 "0 0, 1 1, 2 2"라고 쓸 수 있다. 그러면 (2,2)에서 (0,0)으로 최종 직선이 그려져서 다각형이 완성된다.</dd> +</dl> + +<h3 id="Path" name="Path">Path</h3> + +<p><a href="/en-US/Web/SVG/Element/path" title="en-US/Web/SVG/Element/path">Path</a> 는 아마 SVG에서 사용할 수 있는 가장 일반적인 형태일 것이다. path 요소를 사용해서 당신은 사각형(둥근 모서리가 있거나 없는), 원, 타원, 폴리라인 및 다각형을 그릴 수 있다. 기본적으로 다른 모든 종류의 모양, 베지에 곡선, 2차원 곡선 등이 가능하다. 그러한 이유로, paths 는 튜토리얼의 <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">the next section</a> 에 들어가지만, 지금은 모양을 제어하는 데 사용되는 단일 속성이 있음을 알려주겠다.</p> + +<pre class="brush:xml;gutter:false;"><path d="M 20 230 Q 40 205, 50 230 T 90230"/></pre> + +<dl> + <dt>d</dt> + <dd>A list of points and other information about how to draw the path. See the <a href="/en-US/Web/SVG/Tutorial/Paths" title="en-US/Web/SVG/Tutorial/Paths">Paths</a> section for more information.</dd> +</dl> + +<div>{{ PreviousNext("Web/SVG/Tutorial/Positions", "Web/SVG/Tutorial/Paths") }}</div> diff --git a/files/ko/web/svg/tutorial/시작하기/index.html b/files/ko/web/svg/tutorial/시작하기/index.html new file mode 100644 index 0000000000..8a0b5c82b7 --- /dev/null +++ b/files/ko/web/svg/tutorial/시작하기/index.html @@ -0,0 +1,94 @@ +--- +title: 시작하기 +slug: Web/SVG/Tutorial/시작하기 +tags: + - SVG + - 'SVG:Tutorial' + - 초보자 + - 튜토리얼 +translation_of: Web/SVG/Tutorial/Getting_Started +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> + +<h3 id="A_Simple_Example" name="A_Simple_Example">간단한 예제</h3> + +<p>다음의 코드와 같이 간단한 예제로 시작해보겠습니다.</p> + +<pre class="brush: xml"><svg version="1.1" + baseProfile="full" + width="300" height="200" + xmlns="http://www.w3.org/2000/svg"> + + <rect width="100%" height="100%" fill="red" /> + + <circle cx="150" cy="100" r="80" fill="green" /> + + <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text> + +</svg> +</pre> + +<p>코드를 복사하여 demo1.svg로 저장하고, 파이어폭스 에서 실행해 봅시다. 아래와 같은 화면이 그려질 것입니다.(파이어 폭스 사용자 : <a href="http://developer.mozilla.org/@api/deki/files/4571/=svgdemo1.xml">링크</a>)</p> + +<p><img alt="svgdemo1.png" class="default internal" src="/@api/deki/files/4928/=svgdemo1.png"></p> + +<p>화면이 그려지는 과정은 다음과 같습니다.</p> + +<ol> + <li>SVG 루트 요소(Element)부터 시작합니다. + <ul> + <li>DTD기반의 SVG유효성 검사는 해결할 수 있는 것보다 많은 문제를 야기하기 때문에 (X)HTML로 알려진 Doctype 선언은 사용하지 않습니다.</li> + <li>다른 유형의 유효성 검사를 위해 SVG버전을 식별하려면 항상 version과 baseProfile 속성(Attribute)을 사용해야 합니다.</li> + <li>XML 특수언어(dialect)로서 SVG는 (xmlsn 속성에서) 항상 네임 스페이스(namespace)를 올바르게 바인딩 해야합니다. 자세한 내용은<a href="/en/docs/Web/SVG/Namespaces_Crash_Course"> 네임 스페이스 충돌 과정</a> 페이지를 참조하십시오.</li> + </ul> + </li> + <li>전체 이미지 영역을 포함하는 사각형 <rect />을 그려 배경을 빨간색으로 설정합니다.</li> + <li>빨간색 직사각형의 중앙에 반경 80px의 녹색 원 <circle />이 그려집니다</li> + <li>텍스트 "SVG"가 그려집니다. 각 문자의 내부는 흰색으로 채워집니다. 텍스트는 중심점이 되고자 하는 지점에 앵커를 설정하여 배치됩니다.이 경우 중심점은 녹색 원의 중심에 일치해야합니다. 글꼴 크기와 수직 위치를 미세 조정하여 심미적으로 뛰어난 최종 결과를 얻을 수 있습니다.</li> +</ol> + +<h3 id="SVG_파일의_기본_속성">SVG 파일의 기본 속성</h3> + +<ul> + <li>가장 먼저 주목해야 할 것은 요소를 렌더링하는 순서입니다. SVG 파일 전체에서 유효한 규칙은, 내용의 <em>위에서 부터 아래로</em> 렌더링된다는 것입니다. 요소는 아래에 위치할수록 더 잘보이게 됩니다.</li> + <li>웹의 SVG 파일은 브라우저에 직접 표시되거나 HTML파일에 여러가지 방법을 통해 포함될 수 있습니다: + <ul> + <li>HTML이 XHTML이고 application/xhtml+xml 유형으로 제공되는 경우 SVG는 XML 소스에 직접 포함될 수 있습니다.</li> + <li>HTML이 HTML5이고 브라우저가 HTML5 브라우저를 준수하는 경우 SVG를 직접 삽입 할 수도 있습니다. 그러나 HTML5 사양을 준수하는 데 필요한 구문 변경이 있을 수 있습니다.</li> + <li>SVG 파일은 object 요소로 참조 할 수 있습니다: + <pre> <object data="image.svg" type="image/svg+xml" /></pre> + </li> + <li>마찬가지로 iframe 요소로 사용할 수 있습니다: + <pre> <iframe src="image.svg"></iframe></pre> + </li> + <li>이론적으로, img 요소로 사용될 수 있습니다만 4.0 이전의 Firefox에서는 작동하지 않습니다.</li> + <li>마지막으로 SVG는 JavaScript로 동적으로 생성되어 HTML DOM에 삽입 될 수 있습니다. 이는 SVG를 처리 할 수없는 브라우저에서 대체하여 구현할 수 있다는 장점이 있습니다.</li> + </ul> + 이 주제에 대해 깊이있게 다루기 위해 <a href="/en-US/docs/SVG_In_HTML_Introduction">이 문서</a>를 참조하십시오.</li> + <li>SVG에서 크기와 단위를 처리하는 방법에 대해서는 <a href="/en-US/Web/SVG/Tutorial/Positions">다음 페이지</a>에서 설명 할 것입니다.</li> +</ul> + +<h3 id="SVG_File_Types" name="SVG_File_Types">SVG 파일 형식</h3> + +<p>SVG 파일은 두 가지 형태로 제공됩니다. 일반 SVG 파일은 SVG 마크업이 포함 된 간단한 텍스트 파일입니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svg"입니다.</p> + +<p>일부 응용 프로그램 (예 : 지리적 응용 프로그램)에 사용될 때 매우 큰 크기의 SVG 파일이 있을 수 있기 때문에 SVG 사양에서는 gzip으로 압축 된 SVG 파일을 허용합니다. 이러한 파일의 권장 파일 확장자는 소문자로 ".svgz"입니다. 하지만 안타깝게도 gzip으로 압축 된 SVG 파일을 Microsoft IIS 서버에서 서비스 할 때 모든 SVG 가능 브라우저(사용자 에이전트)에서 안정적으로 작동하게 하려면 문제가 많습니다. 그리고 Firefox는 로컬 컴퓨터에서 gzip으로 압축 된 SVG를 로드 할 수 없습니다. 웹 서버에 게시 할 때를 제외하고는 gzip으로 압축 된 SVG를 피하십시오 (아래 참조).</p> + +<h3 id="A_Word_on_Webservers" name="A_Word_on_Webservers">웹서버 관련 한 마디</h3> + +<p>이제 기본 SVG 파일을 만드는 방법에 대해 알아봤으므로 다음 단계는 웹 서버에 업로드하는 것입니다. 이 단계에서는 몇 가지 문제가 있습니다. 보통, SVG 파일의 경우 서버는 다음과 같이 HTTP 헤더를 보내야합니다.</p> + +<pre>Content-Type: image/svg+xml +Vary: Accept-Encoding</pre> + +<p>gzip으로 압축 된 SVG 파일의 경우, 서버는 다음과 같이 HTTP 헤더를 보내야합니다.</p> + +<pre>Content-Type: image/svg+xml +Content-Encoding: gzip +Vary: Accept-Encoding</pre> + +<p>네트워크 모니터 패널이나 <a href="http://web-sniffer.net/">web-sniffer.net</a>과 같은 사이트를 사용하여 서버가 SVG 파일과 함께 올바른 HTTP 헤더를 보내고 있는지 확인할 수 있습니다. SVG 파일 중 하나의 URL을 전송하고 HTTP 응답 헤더를 확인해 보십시오. 서버가 위의 값으로 헤더를 보내지 않으면 웹 호스트에 문의해야합니다. 서버에 SVG를 올바르게 구성하도록하는 데 문제가 있으면 직접 할 수있는 방법이있을 수 있습니다. 다양한 간단한 솔루션에 대해서는 w3.org의 <a href="https://www.w3.org/services/svg-server/">서버 구성 페이지</a>를 참조하십시오.</p> + +<p>SVG를 사용하는데 있어 서버 구성 오류가 SVG로드에 실패하는 가장 일반적인 이유이기에 확인하십시오. 서버가 SVG 파일을 제공하면서 올바른 헤더를 보내도록 설정되어 있지 않다면 Firefox는 SVG파일의 마크업을 텍스트 또는 인코딩된 의미없는 값으로 표시하거나 뷰어에게 열어 볼 응용 프로그램을 선택하도록 요청할 가능성이 큽니다.</p> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Introduction", "Web/SVG/Tutorial/Positions") }}</p> diff --git a/files/ko/web/svg/tutorial/위치/index.html b/files/ko/web/svg/tutorial/위치/index.html new file mode 100644 index 0000000000..391765175c --- /dev/null +++ b/files/ko/web/svg/tutorial/위치/index.html @@ -0,0 +1,45 @@ +--- +title: 위치 +slug: Web/SVG/Tutorial/위치 +translation_of: Web/SVG/Tutorial/Positions +--- +<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> + +<h2 id="The_grid" name="The_grid">그리드</h2> + +<p><img alt="" class="internal" src="/@api/deki/files/78/=Canvas_default_grid.png" style="float: right;">모든 요소(Element)에 대해 SVG는 <a href="https://developer.mozilla.org/en/HTML/Canvas">캔버스</a>를 포함한 컴퓨터에서 무언가 그리고자 할때 많이 사용되는 것과 유사한 좌표계 또는 그리드 시스템을 사용합니다. 즉, 문서의 왼쪽 위 모서리는 (0,0)으로 간주되며 한 지점의 위치는 왼쪽 상단 모서리에서 픽셀 단위로 표시되고 X축의 양의 방향은 오른쪽, Y축의 양의 방향은 아래쪽으로 향하게됩니다. 어린시절 배웠던 그래프와는 반대라는 점을 기억하세요. 그러나 이것은 HTML의 요소가 배치되는 것과는 같은 방법입니다 (기본적으로 LTR 문서는 X를 오른쪽에서 왼쪽으로 배치하는 RTL 문서가 아닙니다).</p> + +<h4 id="예제">예제:</h4> + +<p>아래 요소는</p> + +<pre><rect x="0" y="0" width="100" height="100" /> +</pre> + +<p>왼쪽 상단에서 100px의 정사각형을 정의합니다.</p> + +<h3 id="픽셀이란">"픽셀"이란?</h3> + +<p>기본적으로 SVG 문서에서 1픽셀은 출력 장치(화면)의 1픽셀에 매핑됩니다. 하지만 이러한 방식만 가능했다면 SVG의 이름에 "확장성(Scalable)"이란 단어가 들어가 있지는 않았겠죠. CSS의 절대 및 상대 글꼴 크기와 매우 흡사하게 SVG는 절대적인 단위 ( "pt"또는 "cm"와 같은 식별자가있는 것)를 정의하고 이것을 사용자 단위(User Unit)로 명칭하며, 이것은 별도의 식별자 없이 숫자 그대로를 사용합니다.</p> + +<p>별도로 명시하지 않았다면, 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다. SVG에는 이 비율을 변경하기 위한 몇가지 방법이 있습니다.</p> + +<pre><svg width="100" height="100"> +</pre> + +<p>위 요소는 100x100px 의 SVG 캔버스를 정의합니다. 사용자 단위와 화면 단위는 1:1의 비율로 동작합니다.</p> + +<pre><svg width="200" height="200" <strong>viewBox="0 0 100 100"</strong>> +</pre> + +<p>SVG 캔버스 전체 크기는 200x200 픽셀입니다. 그러나 viewBox속성을 사용하여 (0,0)에서 시작하는 100x100px의 화면을 200x200px의 화면에 출력합니다. 이렇게하면 100x100 단위 영역을 효과적으로 확대하고 이미지를 두 배 크기로 확대 할 수 있습니다.</p> + +<p>이러한 요소 혹은 전체 이미지의 사용자 단위와 화면 단위의 매핑을 사용자 좌표계(User coordinate system)이라고 합니다. 스케일링 외에도 회전, 기울이기, 뒤집기가 가능합니다. 기본 사용자 좌표계는 하나의 사용자 픽셀을 하나의 장치 픽셀에 매핑합니다. SVG파일에서 "in"또는 "cm"과 같은 특정 치수는 결과 이미지에서 1:1로 보이도록 계산됩니다.</p> + +<p>SVG 1.1 스펙에서는 다음과 같이 인용합니다:</p> + +<blockquote> +<p>[...] 사용자 환경에서 "1px"이 "0.2822222mm" 에 대응한다고 가정했을때(90dpi), SVG는 다음과 같이 처리한다: [...] "1cm"는 "35.43307px"과 같다. (그리고 35.43307 사용자 단위와 같다.)</p> +</blockquote> + +<p>{{ PreviousNext("Web/SVG/Tutorial/Getting_Started", "Web/SVG/Tutorial/Basic_Shapes") }}</p> |