From da78a9e329e272dedb2400b79a3bdeebff387d47 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:17 -0500 Subject: initial commit --- files/ko/web/svg/element/a/index.html | 149 ++++++++++++++ files/ko/web/svg/element/altglyph/index.html | 79 ++++++++ files/ko/web/svg/element/circle/index.html | 95 +++++++++ files/ko/web/svg/element/ellipse/index.html | 110 +++++++++++ files/ko/web/svg/element/index.html | 218 +++++++++++++++++++++ .../index.html" | 95 +++++++++ 6 files changed, 746 insertions(+) create mode 100644 files/ko/web/svg/element/a/index.html create mode 100644 files/ko/web/svg/element/altglyph/index.html create mode 100644 files/ko/web/svg/element/circle/index.html create mode 100644 files/ko/web/svg/element/ellipse/index.html create mode 100644 files/ko/web/svg/element/index.html create mode 100644 "files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" (limited to 'files/ko/web/svg/element') 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: +slug: Web/SVG/Element/a +tags: + - Element + - SVG + - SVG Anchor 엘리먼트 +translation_of: Web/SVG/Element/a +--- +
{{SVGRef}}
+ +

The <a> SVG element creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.

+ +

In SVG, the <a> 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.

+ +
+ + +
<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>
+ +
/* 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;
+}
+ +

{{EmbedLiveSample('Exemple', 100, 100)}}

+
+ +
+

Since this element shares its tag name with HTML's <a> element, selecting "a" with CSS or querySelector may apply to the wrong kind of element. Try the @namespace rule to distinguish between the two.

+
+ +

Attributes

+ +
+
{{htmlattrxref("download", "a")}} {{experimental_inline}}
+
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.
+ Value type: <string> ; Default value: none; Animatable: no
+
{{SVGAttr("href")}}
+
This attribute contains the {{Glossary("URL")}} or URL fragment that the hyperlink points to.
+ Value type: <URL> ; Default value: none; Animatable: yes
+
{{htmlattrxref("hreflang", "a")}}
+
This attribute contains the URL or URL fragment that the hyperlink points to.
+ Value type: <string> ; Default value: none; Animatable: yes
+
{{htmlattrxref("ping", "a")}} {{experimental_inline}}
+
This attribute contains a space-separated list of URLs to which, when the hyperlink is followed, POST requests with the body PING 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 Navigator.sendBeacon().
+ Value type: <list-of-URLs> ; Default value: none; Animatable: no
+
{{htmlattrxref("referrerpolicy", "a")}} {{experimental_inline}}
+
This attribute indicates which referrer to send when fetching the {{Glossary("URL")}}.
+ Value type: no-referrer|no-referrer-when-downgrade|same-origin|origin|strict-origin|origin-when-cross-origin|strict-origin-when-cross-origin|unsafe-url ; Default value: none; Animatable: no
+
{{htmlattrxref("rel", "a")}} {{experimental_inline}}
+
This attribute specifies the relationship of the target object to the link object.
+ Value type: <list-of-Link-Types> ; Default value: none; Animatable: yes
+
{{SVGAttr("target")}}
+
This attribute specifies where to display the linked {{Glossary("URL")}}.
+ Value type: _self|_parent|_top|_blank|<name> ; Default value: _self; Animatable: yes
+
{{htmlattrxref("type", "a")}}
+
This attribute specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL.
+ Value type: <string> ; Default value: none; Animatable: yes
+
{{SVGAttr("xlink:href")}} {{deprecated_inline("SVG2")}}
+
This attribute contains the URL or URL fragment that the hyperlink points to.
+ Value type: <URL> ; Default value: none; Animatable: yes
+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('lang')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Document element event attributes, Graphical event attributes
+
Presentation Attributes
+
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')}}
+
XLink Attributes
+
Most notably: {{SVGAttr("xlink:title")}}
+
ARIA Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Referrer Policy', '#referrer-policy-delivery-referrer-attribute', 'referrer attribute')}}{{Spec2('Referrer Policy')}}Added the referrerpolicy attribute.
{{SpecName("SVG2", "linking.html#Links", "<a>")}}{{Spec2("SVG2")}}Replaced {{SVGAttr("xlink:href")}} attribute by {{SVGAttr("href")}}
{{SpecName("SVG1.1", "linking.html#Links", "<a>")}}{{Spec2("SVG1.1")}}Initial definition
+ +

Browser compatibility

+ + + +

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

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: +slug: Web/SVG/Element/altGlyph +tags: + - Element + - SVG + - "altGlyph\_엘리먼트" +translation_of: Web/SVG/Element/altGlyph +--- +
{{SVGRef}}{{deprecated_header}}
+ +

altGlyph 엘리먼트는 하위 문자 데이타를 랜더링 하기 위해 사용되는 매우복잡한 상형문자의 섹션을 허용한다.

+ +

사용예 컨텍스트

+ +

{{svginfo}}

+ +

속성들

+ +

글로벌 속성들

+ + + +

특정 속성들

+ + + +

DOM 인터페이스

+ +

이 엘리먼트는 SVGAltGlyphElement 인터페이스를 구현한다..

+ +

명세서들

+ + + + + + + + + + + + + + + + +
명세서상태비고
{{SpecName('SVG1.1', 'text.html#AltGlyphElement', '<altGlyph>')}}{{Spec2('SVG1.1')}}초기화 선언
+ +

브라우저 호환성

+ +

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

+ +

See also

+ + 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: +slug: Web/SVG/Element/circle +translation_of: Web/SVG/Element/circle +--- +
{{SVGRef}}
+ +

circle(원)은 엘리먼트는 중심점과 반지름에 기초하여 원을 생성하는데 사용되는  SVG의 기본 모양이다. 

+ +
+ + +
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="50" cy="50" r="50"/>
+</svg>
+ +

{{EmbedLiveSample('Example', 100, 100)}}

+
+ +

사용예 컨텍스트

+ +

{{svginfo}}

+ +

예제

+ +
<?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>
+ +

» circle.svg

+ +

속성들

+ +

글로벌 속성들

+ + + +

특정 속성들

+ +
    +
  • {{ SVGAttr("cx") }}
    • +
  • {{ SVGAttr("cy") }}
    • +
  • {{ SVGAttr("r") }}
    • +
+ +

DOM 인터페이스

+ +

이 엘리먼트는 {{ domxref("SVGCircleElement") }} 를 구현한다..

+ +

명세서들

+ + + + + + + + + + + + + + + + + + + + + +
명세서상태비고
{{SpecName('SVG2', 'shapes.html#CircleElement', '<circle>')}}{{Spec2('SVG2')}} 
{{SpecName('SVG1.1', 'shapes.html#CircleElement', '<circle>')}}{{Spec2('SVG1.1')}}초기화 선언
+ +

브라우저 호환성

+ +

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

+ +

See also

+ +
    +
  • {{ SVGElement("ellipse") }}
    • +
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: +slug: Web/SVG/Element/ellipse +tags: + - Element + - Reference + - SVG + - SVG Grahpics +translation_of: Web/SVG/Element/ellipse +--- +
{{SVGRef}}
+ +

<ellipse> 요소는 SVG의 기본 모양 중 하나로, 중심좌표와 x축, y축 반지름을 이용하여 타원을 생성합니다.

+ +
+

참고: 타원은 정확한 방향을 특정할 수 없습니다. (예를 들어, 45도 기울어진 타원을 그리려고 할 경우) 하지만 {{SVGAttr("transform")}}속성을 사용함으로써 회전할 수는 있습니다.

+
+ +
+ + +
<svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg">
+  <ellipse cx="100" cy="50" rx="100" ry="50" />
+</svg>
+ +

{{EmbedLiveSample('LiveSample', 100, '100%')}}

+
+ +

Attributes

+ +
+
{{SVGAttr("cx")}}
+
The x position of the ellipse.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("cy")}}
+
The y position of the ellipse.
+ Value type: <length>|<percentage> ; Default value: 0; Animatable: yes
+
{{SVGAttr("rx")}}
+
The radius of the ellipse on the x axis.
+ Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("ry")}}
+
The radius of the ellipse on the y axis.
+ Value type: auto|<length>|<percentage> ; Default value: auto; Animatable: yes
+
{{SVGAttr("pathLength")}}
+
This attribute lets specify the total length for the path, in user units.
+ Value type: <number> ; Default value: none; Animatable: yes
+
+ +
+

Note: Starting with SVG2 cx, cy, rx and ry are Geometry Properties, meaning those attributes can also be used as CSS properties for that element.

+
+ +

Global attributes

+ +
+
Core Attributes
+
Most notably: {{SVGAttr('id')}}, {{SVGAttr('tabindex')}}
+
Styling Attributes
+
{{SVGAttr('class')}}, {{SVGAttr('style')}}
+
Conditional Processing Attributes
+
Most notably: {{SVGAttr('requiredExtensions')}}, {{SVGAttr('systemLanguage')}}
+
Event Attributes
+
Global event attributes, Graphical event attributes
+
Presentation Attributes
+
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')}}
+
ARIA Attributes
+
aria-activedescendant, aria-atomic, aria-autocomplete, aria-busy, aria-checked, aria-colcount, aria-colindex, aria-colspan, aria-controls, aria-current, aria-describedby, aria-details, aria-disabled, aria-dropeffect, aria-errormessage, aria-expanded, aria-flowto, aria-grabbed, aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts, aria-label, aria-labelledby, aria-level, aria-live, aria-modal, aria-multiline, aria-multiselectable, aria-orientation, aria-owns, aria-placeholder, aria-posinset, aria-pressed, aria-readonly, aria-relevant, aria-required, aria-roledescription, aria-rowcount, aria-rowindex, aria-rowspan, aria-selected, aria-setsize, aria-sort, aria-valuemax, aria-valuemin, aria-valuenow, aria-valuetext, role
+
+ +

Usage notes

+ +

{{svginfo}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('SVG2', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG2')}}Added auto value for rx and ry
{{SpecName('SVG1.1', 'shapes.html#EllipseElement', '<ellipse>')}}{{Spec2('SVG1.1')}}Initial definition
+ +

Browser compatibility

+ + + +

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

+ +

See also

+ +
    +
  • Other SVG basic shapes: {{ SVGElement('circle') }}, {{ SVGElement('line') }}, {{ SVGElement('polygon') }}, {{ SVGElement('polyline') }}, {{ SVGElement('rect') }}
    • +
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 +--- +

« SVG / SVG Attribute reference »

+ +

SVG 엘리먼트들

+ +
A + +
    +
  • {{SVGElement("a")}}
    • +
  • {{SVGElement("altGlyph")}}
    • +
  • {{SVGElement("altGlyphDef")}}
    • +
  • {{SVGElement("altGlyphItem")}}
    • +
  • {{SVGElement("animate")}}
    • +
  • {{SVGElement("animateColor")}}
    • +
  • {{SVGElement("animateMotion")}}
    • +
  • {{SVGElement("animateTransform")}}
    • +
+B C + +
    +
  • {{SVGElement("circle")}}
    • +
  • {{SVGElement("clipPath")}}
    • +
  • {{SVGElement("color-profile")}}
    • +
  • {{SVGElement("cursor")}}
    • +
+D + +
    +
  • {{SVGElement("defs")}}
    • +
  • {{SVGElement("desc")}}
    • +
+E + +
    +
  • {{SVGElement("ellipse")}}
    • +
+F + +
    +
  • {{SVGElement("feBlend")}}
    • +
  • {{SVGElement("feColorMatrix")}}
    • +
  • {{SVGElement("feComponentTransfer")}}
    • +
  • {{SVGElement("feComposite")}}
    • +
  • {{SVGElement("feConvolveMatrix")}}
    • +
  • {{SVGElement("feDiffuseLighting")}}
    • +
  • {{SVGElement("feDisplacementMap")}}
    • +
  • {{SVGElement("feDistantLight")}}
    • +
  • {{SVGElement("feFlood")}}
    • +
  • {{SVGElement("feFuncA")}}
    • +
  • {{SVGElement("feFuncB")}}
    • +
  • {{SVGElement("feFuncG")}}
    • +
  • {{SVGElement("feFuncR")}}
    • +
  • {{SVGElement("feGaussianBlur")}}
    • +
  • {{SVGElement("feImage")}}
    • +
  • {{SVGElement("feMerge")}}
    • +
  • {{SVGElement("feMergeNode")}}
    • +
  • {{SVGElement("feMorphology")}}
    • +
  • {{SVGElement("feOffset")}}
    • +
  • {{SVGElement("fePointLight")}}
    • +
  • {{SVGElement("feSpecularLighting")}}
    • +
  • {{SVGElement("feSpotLight")}}
    • +
  • {{SVGElement("feTile")}}
    • +
  • {{SVGElement("feTurbulence")}}
    • +
  • {{SVGElement("filter")}}
    • +
  • {{SVGElement("font")}}
    • +
  • {{SVGElement("font-face")}}
    • +
  • {{SVGElement("font-face-format")}}
    • +
  • {{SVGElement("font-face-name")}}
    • +
  • {{SVGElement("font-face-src")}}
    • +
  • {{SVGElement("font-face-uri")}}
    • +
  • {{SVGElement("foreignObject")}}
    • +
+G + +
    +
  • {{SVGElement("g")}}
    • +
  • {{SVGElement("glyph")}}
    • +
  • {{SVGElement("glyphRef")}}
    • +
+H + +
    +
  • {{SVGElement("hkern")}}
    • +
+I + +
    +
  • {{SVGElement("image")}}
    • +
+J K L + +
    +
  • {{SVGElement("line")}}
    • +
  • {{SVGElement("linearGradient")}}
    • +
+M + +
    +
  • {{SVGElement("marker")}}
    • +
  • {{SVGElement("mask")}}
    • +
  • {{SVGElement("metadata")}}
    • +
  • {{SVGElement("missing-glyph")}}
    • +
  • {{SVGElement("mpath")}}
    • +
+N O P + +
    +
  • {{SVGElement("path")}}
    • +
  • {{SVGElement("pattern")}}
    • +
  • {{SVGElement("polygon")}}
    • +
  • {{SVGElement("polyline")}}
    • +
+Q R + +
    +
  • {{SVGElement("radialGradient")}}
    • +
  • {{SVGElement("rect")}}
    • +
+S + +
    +
  • {{SVGElement("script")}}
    • +
  • {{SVGElement("set")}}
    • +
  • {{SVGElement("stop")}}
    • +
  • {{SVGElement("style")}}
    • +
  • {{SVGElement("svg")}}
    • +
  • {{SVGElement("switch")}}
    • +
  • {{SVGElement("symbol")}}
    • +
+T + +
    +
  • {{SVGElement("text")}}
    • +
  • {{SVGElement("textPath")}}
    • +
  • {{SVGElement("title")}}
    • +
  • {{SVGElement("tref")}}
    • +
  • {{SVGElement("tspan")}}
    • +
+U + +
    +
  • {{SVGElement("use")}}
    • +
+V — Z + +
    +
  • {{SVGElement("view")}}
    • +
  • {{SVGElement("vkern")}}
    • +
+
+ +

범주들

+ +

애니메이션 엘리먼트들

+ +

{{SVGElement("animate")}}, {{SVGElement("animateColor")}}, {{SVGElement("animateMotion")}}, {{SVGElement("animateTransform")}}, {{SVGElement("mpath")}}, {{SVGElement("set")}}

+ +

기본 모양들

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

컨테이너 엘리먼트들

+ +

{{SVGElement("a")}}, {{SVGElement("defs")}}, {{SVGElement("glyph")}}, {{SVGElement("g")}}, {{SVGElement("marker")}}, {{SVGElement("mask")}}, {{SVGElement("missing-glyph")}}, {{SVGElement("pattern")}}, {{SVGElement("svg")}}, {{SVGElement("switch")}}, {{SVGElement("symbol")}}

+ +

기술하는 엘리먼트들

+ +

{{SVGElement("desc")}}, {{SVGElement("metadata")}}, {{SVGElement("title")}}

+ +

기본 필터 엘리먼트들

+ +

{{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")}}

+ +

폰트 엘리먼트들

+ +

{{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")}}

+ +

구배(경사) 엘리먼트들

+ +

{{SVGElement("linearGradient")}}, {{SVGElement("radialGradient")}}, {{SVGElement("stop")}}

+ +

그래픽 엘리먼트들

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("image")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}, {{SVGElement("text")}}, {{SVGElement("use")}}

+ +

가벼운 소스 엘리먼트들

+ +

{{SVGElement("feDistantLight")}}, {{SVGElement("fePointLight")}}, {{SVGElement("feSpotLight")}}

+ +

모양 엘리먼트들

+ +

{{SVGElement("circle")}}, {{SVGElement("ellipse")}}, {{SVGElement("line")}}, {{SVGElement("path")}}, {{SVGElement("polygon")}}, {{SVGElement("polyline")}}, {{SVGElement("rect")}}

+ +

구조적인 엘리먼트들

+ +

{{SVGElement("defs")}}, {{SVGElement("g")}}, {{SVGElement("svg")}}, {{SVGElement("symbol")}}, {{SVGElement("use")}}

+ +

텍스트 컨텍스트 엘리먼트들

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("altGlyphDef")}}, {{SVGElement("altGlyphItem")}}, {{SVGElement("glyph")}}, {{SVGElement("glyphRef")}}, {{SVGElement("textPath")}}, {{SVGElement("text")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

텍스트 컨텍스트 하위 엘리먼트들

+ +

{{SVGElement("altGlyph")}}, {{SVGElement("textPath")}}, {{SVGElement("tref")}}, {{SVGElement("tspan")}}

+ +

범주화 되지 않은 엘리먼트들

+ +

{{SVGElement("clipPath")}}, {{SVGElement("color-profile")}}, {{SVGElement("cursor")}}, {{SVGElement("filter")}}, {{SVGElement("foreignObject")}}, {{SVGElement("script")}}, {{SVGElement("style")}}, {{SVGElement("view")}}

diff --git "a/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" "b/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" new file mode 100644 index 0000000000..90a3d08d24 --- /dev/null +++ "b/files/ko/web/svg/element/\354\202\254\352\260\201\355\230\225/index.html" @@ -0,0 +1,95 @@ +--- +title: +slug: Web/SVG/Element/사각형 +translation_of: Web/SVG/Element/rect +--- +
{{SVGRef}}
+ +

<rect> 요소는 SVG 기본 모형이고 코너의 위치와 폭과 높이에 따라 사각형을 만드는데 사용된다. 또한 모서리가 둥근 사각형을 만들 수 있다.

+ +
+ + +
<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>
+ +

{{EmbedLiveSample('Example', 100, '100%')}}

+
+ +

컨택스트 사용해보기

+ + + + + + + + + + + + + + + + +
카테고리기본 도형 요소, 그래픽 요소, 모형 요소
허용 된 콘텐츠Any number of the following elements, in any order:
+ Animation elements »
+ Descriptive elements »
규범 문서SVG 1.1 (2nd Edition)
+ +

Example

+ +

간단한 rect 사용하기

+ +

» rect-1.svg

+ +

라운드 코너와 rect 사용하기

+ +

» rect-2.svg

+ +

속성

+ +

전역 속성

+ + + +

지정 속성

+ +
    +
  • {{ SVGAttr("x") }}
    • +
  • {{ SVGAttr("y") }}
    • +
  • {{ SVGAttr("width") }}
    • +
  • {{ SVGAttr("height") }}
    • +
  • {{ SVGAttr("rx") }}
    • +
  • {{ SVGAttr("ry") }}
    • +
+ +

DOM Interface

+ +

This element implements the SVGRectElement interface.

+ +

Browser compatibility

+ +

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

+ +

See also

+ +
    +
  • {{ SVGElement("path") }}
    • +
-- cgit v1.2.3-54-g00ecf