files/ko/web/svg/attribute/values/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
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>&lt;list&gt;</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>&lt;list&gt; | <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Paint">&lt;number&gt;</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>