js-components-svg-common-attributes.md

# Universal Attributes<a name="EN-US_TOPIC_0000001210298229"></a>

<a name="table20633101642315"></a>
<table><thead align="left"><tr id="row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="aaf1247770b244944bbcc9f28d9a6f00b"><a name="aaf1247770b244944bbcc9f28d9a6f00b"></a><a name="aaf1247770b244944bbcc9f28d9a6f00b"></a>Name</p>
</th>
<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="a6efc3502761f4faf9630e484280f75b6"><a name="a6efc3502761f4faf9630e484280f75b6"></a><a name="a6efc3502761f4faf9630e484280f75b6"></a>Type</p>
</th>
<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="a27a37273d9ad47569ddbcb8db985d302"><a name="a27a37273d9ad47569ddbcb8db985d302"></a><a name="a27a37273d9ad47569ddbcb8db985d302"></a>Default Value</p>
</th>
<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="p824610360217"><a name="p824610360217"></a><a name="p824610360217"></a>Mandatory</p>
</th>
<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="a2ff3361bfd3b420ba4967452d2ddd098"><a name="a2ff3361bfd3b420ba4967452d2ddd098"></a><a name="a2ff3361bfd3b420ba4967452d2ddd098"></a>Description</p>
</th>
</tr>
</thead>
<tbody><tr id="row36332165231"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="a83b6dd280109466fb015e64de1ef4df3"><a name="a83b6dd280109466fb015e64de1ef4df3"></a><a name="a83b6dd280109466fb015e64de1ef4df3"></a>fill</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="abc38fa2b85854bc687af75eb17a00a4d"><a name="abc38fa2b85854bc687af75eb17a00a4d"></a><a name="abc38fa2b85854bc687af75eb17a00a4d"></a>&lt;color&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="a8d12e4af905d4743a5ec9cd6018d2972"><a name="a8d12e4af905d4743a5ec9cd6018d2972"></a><a name="a8d12e4af905d4743a5ec9cd6018d2972"></a>black</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p42461736102118"><a name="p42461736102118"></a><a name="p42461736102118"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="a1a1731af05554f119fa365748f276bb2"><a name="a1a1731af05554f119fa365748f276bb2"></a><a name="a1a1731af05554f119fa365748f276bb2"></a>Fill color of an element using the shorthand attribute. Attribute animations are supported.</p>
</td>
</tr>
<tr id="row13633131616239"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="a97f90720f6ef448fb3afbb3b1c13ae25"><a name="a97f90720f6ef448fb3afbb3b1c13ae25"></a><a name="a97f90720f6ef448fb3afbb3b1c13ae25"></a>fill-opacity</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="a165d9cd14ccf4127b2e22cc6397680ac"><a name="a165d9cd14ccf4127b2e22cc6397680ac"></a><a name="a165d9cd14ccf4127b2e22cc6397680ac"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="a836c513375114f6dac7693e0b4f33230"><a name="a836c513375114f6dac7693e0b4f33230"></a><a name="a836c513375114f6dac7693e0b4f33230"></a>1</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p17246836142119"><a name="p17246836142119"></a><a name="p17246836142119"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="adbe7ecbee96b4f938b04a4b8d62791bf"><a name="adbe7ecbee96b4f938b04a4b8d62791bf"></a><a name="adbe7ecbee96b4f938b04a4b8d62791bf"></a>Transparency of a fill color. The value ranges from <strong id="b372234019102"><a name="b372234019102"></a><a name="b372234019102"></a>0</strong> to <strong id="b572294061011"><a name="b572294061011"></a><a name="b572294061011"></a>1</strong>. The value <strong id="b13723174011104"><a name="b13723174011104"></a><a name="b13723174011104"></a>1</strong> means opaque, and <strong id="b157233405107"><a name="b157233405107"></a><a name="b157233405107"></a>0</strong> means completely transparent. Attribute animations are supported.</p>
</td>
</tr>
<tr id="row1946552964610"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p946522913468"><a name="p946522913468"></a><a name="p946522913468"></a>fill-rule</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p1146512964611"><a name="p1146512964611"></a><a name="p1146512964611"></a>nonzero | evenodd</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p144651829184615"><a name="p144651829184615"></a><a name="p144651829184615"></a>nonzero</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p34651229104619"><a name="p34651229104619"></a><a name="p34651229104619"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p174651329114611"><a name="p174651329114611"></a><a name="p174651329114611"></a><strong id="b1959241720111"><a name="b1959241720111"></a><a name="b1959241720111"></a>nonzero</strong>: non-zero rule; <strong id="b4448201918119"><a name="b4448201918119"></a><a name="b4448201918119"></a>evend</strong>: parity rule.</p>
</td>
</tr>
<tr id="row10634131610230"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="a4a0bae0e1bb946d6bc7bf30e0a535343"><a name="a4a0bae0e1bb946d6bc7bf30e0a535343"></a><a name="a4a0bae0e1bb946d6bc7bf30e0a535343"></a>opacity</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="a2679e4565dbc4370b40d1be831a6148d"><a name="a2679e4565dbc4370b40d1be831a6148d"></a><a name="a2679e4565dbc4370b40d1be831a6148d"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="a0b0d56a245e14779a5561f99cd1ce9f6"><a name="a0b0d56a245e14779a5561f99cd1ce9f6"></a><a name="a0b0d56a245e14779a5561f99cd1ce9f6"></a>1</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p324614367213"><a name="p324614367213"></a><a name="p324614367213"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="aa0471c31e05e465aa9c42312b9ab9f6f"><a name="aa0471c31e05e465aa9c42312b9ab9f6f"></a><a name="aa0471c31e05e465aa9c42312b9ab9f6f"></a>Transparency of an element. The value ranges from <strong id="b1748232615116"><a name="b1748232615116"></a><a name="b1748232615116"></a>0</strong> to <strong id="b14836266111"><a name="b14836266111"></a><a name="b14836266111"></a>1</strong>. The value <strong id="b64831526121110"><a name="b64831526121110"></a><a name="b64831526121110"></a>1</strong> means opaque, and <strong id="b144843268112"><a name="b144843268112"></a><a name="b144843268112"></a>0</strong> means completely transparent. Attribute animations are supported.</p>
</td>
</tr>
<tr id="row1634171618236"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="a3cf785e2a2a043268d168f58d59207c8"><a name="a3cf785e2a2a043268d168f58d59207c8"></a><a name="a3cf785e2a2a043268d168f58d59207c8"></a>stroke</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p191327514246"><a name="p191327514246"></a><a name="p191327514246"></a>&lt;color&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p113205122410"><a name="p113205122410"></a><a name="p113205122410"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1624612362219"><a name="p1624612362219"></a><a name="p1624612362219"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p62121758111517"><a name="p62121758111517"></a><a name="p62121758111517"></a>Color of the stroke. Attribute animations are supported.</p>
</td>
</tr>
<tr id="row1259531661611"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p1359601671613"><a name="p1359601671613"></a><a name="p1359601671613"></a>stroke-dasharray</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p65967163165"><a name="p65967163165"></a><a name="p65967163165"></a>&lt;string&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p10596151671610"><a name="p10596151671610"></a><a name="p10596151671610"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1059610169169"><a name="p1059610169169"></a><a name="p1059610169169"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p125961416161611"><a name="p125961416161611"></a><a name="p125961416161611"></a>Length of the dashes and notches. The format is [length length length length]. The length values of dashes and notches are separated by a space and appear in pairs.</p>
</td>
</tr>
<tr id="row860211185222"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p17603818142214"><a name="p17603818142214"></a><a name="p17603818142214"></a>stroke-dashoffset</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p1860313181224"><a name="p1860313181224"></a><a name="p1860313181224"></a>&lt;length&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p2603131892217"><a name="p2603131892217"></a><a name="p2603131892217"></a>0</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p13603518122217"><a name="p13603518122217"></a><a name="p13603518122217"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p7603151814225"><a name="p7603151814225"></a><a name="p7603151814225"></a>Offset for rendering the associated dash line array. Attribute animations are supported.</p>
</td>
</tr>
<tr id="row11404114510176"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p11404124541714"><a name="p11404124541714"></a><a name="p11404124541714"></a>stroke-linejoin</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p1640474511172"><a name="p1640474511172"></a><a name="p1640474511172"></a>[bevel | miter | round]</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p740494521712"><a name="p740494521712"></a><a name="p740494521712"></a>miter</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p04046452179"><a name="p04046452179"></a><a name="p04046452179"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p740434541717"><a name="p740434541717"></a><a name="p740434541717"></a>The shape used at the corner of a path when stroked.</p>
<p id="p1432771818271"><a name="p1432771818271"></a><a name="p1432771818271"></a><strong id="b114014162159"><a name="b114014162159"></a><a name="b114014162159"></a>bevel</strong>: connects paths with bevel corners.</p>
<p id="p16327131852712"><a name="p16327131852712"></a><a name="p16327131852712"></a><strong id="b1130012305156"><a name="b1130012305156"></a><a name="b1130012305156"></a>miter</strong>: connects paths with mitered corners.</p>
<p id="p1232715183278"><a name="p1232715183278"></a><a name="p1232715183278"></a><strong id="b43026401159"><a name="b43026401159"></a><a name="b43026401159"></a>round</strong>: connects paths with rounded corners.</p>
</td>
</tr>
<tr id="row1956184215171"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p85621442121713"><a name="p85621442121713"></a><a name="p85621442121713"></a>stroke-linecap</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p656219422171"><a name="p656219422171"></a><a name="p656219422171"></a>[butt | round | square]</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p10562442131715"><a name="p10562442131715"></a><a name="p10562442131715"></a>butt</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p1256234291718"><a name="p1256234291718"></a><a name="p1256234291718"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p1256204215175"><a name="p1256204215175"></a><a name="p1256204215175"></a>The shape used at the end of paths when stroked.</p>
<p id="p15561202832912"><a name="p15561202832912"></a><a name="p15561202832912"></a><strong id="b12870164116174"><a name="b12870164116174"></a><a name="b12870164116174"></a>butt</strong>: The stroke for each path does not extend beyond its two endpoints.</p>
<p id="p10561428172914"><a name="p10561428172914"></a><a name="p10561428172914"></a><strong id="b5823111013184"><a name="b5823111013184"></a><a name="b5823111013184"></a>round</strong>: At the end of each path the stroke is extended by a half circle with a diameter equal to the stroke width.</p>
<p id="p175611728152917"><a name="p175611728152917"></a><a name="p175611728152917"></a><strong id="b16607112114516"><a name="b16607112114516"></a><a name="b16607112114516"></a>square</strong>: At the end of each path the stroke is extended by a half circle, with the width being equal to half of the stroke width, and the height being equal to the stroke width.</p>
</td>
</tr>
<tr id="row659813582710"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p359803512275"><a name="p359803512275"></a><a name="p359803512275"></a>stroke-miterlimit</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p10598135172710"><a name="p10598135172710"></a><a name="p10598135172710"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p13598235142715"><a name="p13598235142715"></a><a name="p13598235142715"></a>4</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p559823513270"><a name="p559823513270"></a><a name="p559823513270"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p16598135132713"><a name="p16598135132713"></a><a name="p16598135132713"></a>Limit value when the sharp angle is drawn as a miter. Attribute animations are supported.</p>
</td>
</tr>
<tr id="row19417173332715"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p5417833162715"><a name="p5417833162715"></a><a name="p5417833162715"></a>stroke-opacity</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p137791326163216"><a name="p137791326163216"></a><a name="p137791326163216"></a>number</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p1277902618326"><a name="p1277902618326"></a><a name="p1277902618326"></a>1</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p19779132663212"><a name="p19779132663212"></a><a name="p19779132663212"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p104188333270"><a name="p104188333270"></a><a name="p104188333270"></a>Transparency of the stroke. The value ranges from <strong id="b8690125911451"><a name="b8690125911451"></a><a name="b8690125911451"></a>0</strong> to <strong id="b17690195910457"><a name="b17690195910457"></a><a name="b17690195910457"></a>1</strong>. The value <strong id="b1469145934519"><a name="b1469145934519"></a><a name="b1469145934519"></a>1</strong> means opaque, and <strong id="b15691165954514"><a name="b15691165954514"></a><a name="b15691165954514"></a>0</strong> means completely transparent. Attribute animations are supported.</p>
</td>
</tr>
<tr id="row0693162293115"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p12693142223110"><a name="p12693142223110"></a><a name="p12693142223110"></a>stroke-width</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p6496858104716"><a name="p6496858104716"></a><a name="p6496858104716"></a>&lt;length&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p1869302214316"><a name="p1869302214316"></a><a name="p1869302214316"></a>1px</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p0693172233116"><a name="p0693172233116"></a><a name="p0693172233116"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p769472283117"><a name="p769472283117"></a><a name="p769472283117"></a>Stroke width. Attribute animations are supported.</p>
</td>
</tr>
<tr id="row1421814469342"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="p221811461341"><a name="p221811461341"></a><a name="p221811461341"></a>transform</p>
</td>
<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="p221811469349"><a name="p221811469349"></a><a name="p221811469349"></a>&lt;string&gt;</p>
</td>
<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="p18218104643414"><a name="p18218104643414"></a><a name="p18218104643414"></a>-</p>
</td>
<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="p621814603413"><a name="p621814603413"></a><a name="p621814603413"></a>No</p>
</td>
<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="p18219124683417"><a name="p18219124683417"></a><a name="p18219124683417"></a>Coordinate transformation parameters of the component and its child components.</p>
<p id="p183345463353"><a name="p183345463353"></a><a name="p183345463353"></a>The following formats are supported:</p>
<p id="p97754703611"><a name="p97754703611"></a><a name="p97754703611"></a><strong id="b20384820194811"><a name="b20384820194811"></a><a name="b20384820194811"></a>translate(&lt;x&gt; [&lt;y&gt;])</strong>: translates along the x[y]-axis.</p>
<p id="p2853121513620"><a name="p2853121513620"></a><a name="p2853121513620"></a><strong id="b182151374485"><a name="b182151374485"></a><a name="b182151374485"></a>scale(&lt;x&gt; [&lt;y&gt;])</strong>: scales along the x[y]-axis.</p>
<p id="p08302534363"><a name="p08302534363"></a><a name="p08302534363"></a><strong id="b195865430485"><a name="b195865430485"></a><a name="b195865430485"></a>rotate(&lt;a&gt; [&lt;x&gt; &lt;y&gt;])</strong>: rotates at an angle of <strong id="b117161113533"><a name="b117161113533"></a><a name="b117161113533"></a>a</strong> with (x,y) as the center.</p>
<p id="p91741924123618"><a name="p91741924123618"></a><a name="p91741924123618"></a><strong id="b187551240134919"><a name="b187551240134919"></a><a name="b187551240134919"></a>skewX(&lt;a&gt;)</strong>: skews at an angle of <strong id="b173605136532"><a name="b173605136532"></a><a name="b173605136532"></a>a</strong> along the x-axis.</p>
<p id="p192841756133515"><a name="p192841756133515"></a><a name="p192841756133515"></a><strong id="b75191724115317"><a name="b75191724115317"></a><a name="b75191724115317"></a>skewX(&lt;a&gt;)</strong>: skews at an angle of <strong id="b1252062495318"><a name="b1252062495318"></a><a name="b1252062495318"></a>a</strong> along the y-axis.</p>
</td>
</tr>
</tbody>
</table>