---
title: SVG Presentation Attributes
slug: Web/SVG/Attribute/Presentation
translation_of: Web/SVG/Attribute/Presentation
---
<p>{{draft}}</p>

<p>SVG表现属性是能够被用在SVG元素属性上的CSS属性。</p>

<div class="index">
<ul>
 <li><a href="#attr-alignment-baseline">alignment-baseline</a></li>
 <li><a href="#attr-baseline-shift">baseline-shift</a></li>
 <li><a href="#attr-clip">clip</a></li>
 <li><a href="#attr-clip-path">clip-path</a></li>
 <li><a href="#attr-clip-rule">clip-rule</a></li>
 <li><a href="#attr-color">color</a></li>
 <li><a href="#attr-color-interpolation">color-interpolation</a></li>
 <li><a href="#attr-color-interpolation-filters">color-interpolation-filters</a></li>
 <li><a href="#attr-color-profile">color-profile</a></li>
 <li><a href="#attr-color-rendering">color-rendering</a></li>
 <li><a href="#attr-cursor">cursor</a></li>
 <li><a href="#attr-direction">direction</a></li>
 <li><a href="#attr-display">display</a></li>
 <li><a href="#attr-dominant-baseline">dominant-baseline</a></li>
 <li><a href="#attr-enable-background">enable-background</a></li>
 <li><a href="#attr-fill">fill</a></li>
 <li><a href="#attr-fill-opacity">fill-opacity</a></li>
 <li><a href="#attr-fill-rule">fill-rule</a></li>
 <li><a href="#attr-filter">filter</a></li>
 <li><a href="#attr-flood-color">flood-color</a></li>
 <li><a href="#attr-flood-opacity">flood-opacity</a></li>
 <li><a href="#attr-font-family">font-family</a></li>
 <li><a href="#attr-font-size">font-size</a></li>
 <li><a href="#attr-font-size-adjust">font-size-adjust</a></li>
 <li><a href="#attr-font-stretch">font-stretch</a></li>
 <li><a href="#attr-font-style">font-style</a></li>
 <li><a href="#attr-font-variant">font-variant</a></li>
 <li><a href="#attr-font-weight">font-weight</a></li>
 <li><a href="#attr-glyph-orientation-horizontal">glyph-orientation-horizontal</a></li>
 <li><a href="#attr-glyph-orientation-vertical">glyph-orientation-vertical</a></li>
 <li><a href="#attr-image-rendering">image-rendering</a></li>
 <li><a href="#attr-kerning">kerning</a></li>
 <li><a href="#attr-letter-spacing">letter-spacing</a></li>
 <li><a href="#attr-lighting-color">lighting-color</a></li>
 <li><a href="#attr-marker-end">marker-end</a></li>
 <li><a href="#attr-marker-mid">marker-mid</a></li>
 <li><a href="#attr-marker-start">marker-start</a></li>
 <li><a href="#attr-mask">mask</a></li>
 <li><a href="#attr-opacity">opacity</a></li>
 <li><a href="#attr-overflow">overflow</a></li>
 <li><a href="#attr-pointer-events">pointer-events</a></li>
 <li><a href="#attr-shape-rendering">shape-rendering</a></li>
 <li><a href="#attr-solid-color">solid-color</a></li>
 <li><a href="#attr-solid-opacity">solid-opacity</a></li>
 <li><a href="#attr-stop-color">stop-color</a></li>
 <li><a href="#attr-stop-opacity">stop-opacity</a></li>
 <li><a href="#attr-stroke">stroke</a></li>
 <li><a href="#attr-stroke-dasharray">stroke-dasharray</a></li>
 <li><a href="#attr-stroke-dashoffset">stroke-dashoffset</a></li>
 <li><a href="#attr-stroke-linecap">stroke-linecap</a></li>
 <li><a href="#attr-stroke-linejoin">stroke-linejoin</a></li>
 <li><a href="#attr-stroke-miterlimit">stroke-miterlimit</a></li>
 <li><a href="#attr-stroke-opacity">stroke-opacity</a></li>
 <li><a href="#attr-stroke-width">stroke-width</a></li>
 <li><a href="#attr-text-anchor">text-anchor</a></li>
 <li><a href="#attr-text-decoration">text-decoration</a></li>
 <li><a href="#attr-text-rendering">text-rendering</a></li>
 <li><a href="#attr-transform">transform</a></li>
 <li><a href="#attr-unicode-bidi">unicode-bidi</a></li>
 <li><a href="#attr-vector-effect">vector-effect</a></li>
 <li><a href="#attr-visibility">visibility</a></li>
 <li><a href="#attr-word-spacing">word-spacing</a></li>
 <li><a href="#attr-writing-mode">writing-mode</a></li>
</ul>
</div>

<h2 id="Attributes">Attributes</h2>

<dl>
 <dt id="attr-alignment-baseline">{{SVGAttr('alignment-baseline')}}</dt>
 <dd>It specifies how an object is aligned along the font baseline with respect to its parent.<br>
 <small><em>Value</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>before-edge</code>|<code>text-before-edge</code>|<code>middle</code>|<code>central</code>|<code>after-edge</code>|<code>text-after-edge</code>|<code>ideographic</code>|<code>alphabetic</code>|<code>hanging</code>|<code>mathematical</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-baseline-shift">{{SVGAttr('baseline-shift')}}</dt>
 <dd>It allows repositioning of the dominant-baseline relative to the dominant-baseline of the parent text content element.<br>
 <small><em>Value</em>: <strong><code>auto</code></strong>|<code>baseline</code>|<code>super</code>|<code>sub</code>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-clip">{{SVGAttr('clip')}} {{deprecated_inline('css')}}</dt>
 <dd>It defines what portion of an element is visible.<br>
 <small><em>Value</em>: <strong><code>auto</code></strong>|{{cssxref("shape")}}|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-clip-path">{{SVGAttr('clip-path')}}</dt>
 <dd>It binds the element it is applied to with a given {{SVGElement('clipPath')}} element.<br>
 <small><em>Value</em>: <strong><code>none</code></strong>|<a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-clip-rule">{{SVGAttr('clip-rule')}}</dt>
 <dd>It indicates how to determine what side of a path is inside a shape in order to know how a {{SVGElement('clipPath')}} should clip its target.<br>
 <small><em>Value</em>: <strong><code>nonezero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-color">{{SVGAttr('color')}}</dt>
 <dd>It provides a potential indirect value (<code>currentColor</code>) for the <code>fill</code>, <code>stroke</code>, <code>stop-color</code>, <code>flood-color</code> and <code>lighting-color</code> presentation attributes.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-color-interpolation">{{SVGAttr('color-interpolation')}}</dt>
 <dd>It specifies the color space for gradient interpolations, color animations, and alpha compositing.<br>
 <small><em>Value</em>: <code>auto</code>|<strong><code>sRGB</code></strong>|<code>linearRGB</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-color-interpolation-filters">{{SVGAttr('color-interpolation-filters')}}</dt>
 <dd>It specifies the color space for imaging operations performed via filter effects.<br>
 <small><em>Value</em>: <code>auto</code>|<code>sRGB</code>|<strong><code>linearRGB</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-color-profile">{{SVGAttr('color-profile')}} {{deprecated_inline('svg2')}}</dt>
 <dd>It defines which color profile a raster image included through the {{SVGElement('image')}} element should use.<br>
 <small><em>Value</em>: <code>auto</code>|<code>sRGB</code>|<code>linearRGB</code>|<a href="/docs/Web/SVG/Content_type#Name">&lt;name&gt;</a>|<a href="/docs/Web/SVG/Content_type#IRI">&lt;IRI&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-color-rendering">{{SVGAttr('color-rendering')}}</dt>
 <dd>It provides a hint to the browser about how to optimize its color interpolation and compositing operations.<br>
 <small><em>Value</em>: <strong><code>auto</code></strong>|<code>optimizeSpeed</code>|<code>optimizeQuality</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-cursor">{{SVGAttr('cursor')}}</dt>
 <dd>It specifies the mouse cursor displayed when the mouse pointer is over an element.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<a href="/docs/Web/CSS/cursor#Values">&lt;keywords&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-direction">{{SVGAttr('direction')}}</dt>
 <dd>It specifies the base writing direction of text.<br>
 <small><em>Value</em>: <strong><code>ltr</code></strong>|<code>rtl</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-display">{{SVGAttr('display')}}</dt>
 <dd>It allows to control the rendering of graphical or container elements.<br>
 <small><em>Value</em>: see css {{cssxref('display')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-dominant-baseline">{{SVGAttr('dominant-baseline')}}</dt>
 <dd>It defines the baseline used to align the box’s text and inline-level contents.<br>
 <small><em>Value</em>: <code>auto</code>|<code>text-bottom</code>|<code>alphabetic</code>|<code>ideographic</code>|<code>middle</code>|<code>central</code>| <code>mathematical</code>|<code>hanging</code>|<code>text-top</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-enable-background">{{SVGAttr('enable-background')}} {{deprecated_inline('svg2')}}</dt>
 <dd>It tells the browser how to manage the accumulation of the background image.<br>
 <small><em>Value</em>: <strong><code>accumulate</code></strong>|<code>new</code>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd>
 <dt id="attr-fill">{{SVGAttr('fill')}}</dt>
 <dd>It defines the color of the inside of the graphical element it applies to.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-fill-opacity">{{SVGAttr('fill-opacity')}}</dt>
 <dd>It specifies the opacity of the color or the content the current object is filled with.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-fill-rule">{{SVGAttr('fill-rule')}}</dt>
 <dd>It indicates how to determine what side of a path is inside a shape.<br>
 <small><em>Value</em>: <strong><code>nonzero</code></strong>|<code>evenodd</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-filter">{{SVGAttr('filter')}}</dt>
 <dd>It defines the filter effects defined by the {{SVGElement('filter')}} element that shall be applied to its element.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-flood-color">{{SVGAttr('flood-color')}}</dt>
 <dd>It indicates what color to use to flood the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-flood-opacity">{{SVGAttr('flood-opacity')}}</dt>
 <dd>It indicates the opacity value to use across the current filter primitive subregion defined through the {{SVGElement('feFlood')}} or {{SVGElement('feDropShadow')}} element.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-font-family">{{SVGAttr('font-family')}}</dt>
 <dd>It indicates which font family will be used to render the text of the element.<br>
 <small><em>Value</em>: see css {{cssxref('font-family')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-font-size">{{SVGAttr('font-size')}}</dt>
 <dd>It specifies the size of the font.<br>
 <small><em>Value</em>: see css {{cssxref('font-size')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-font-size-adjust">{{SVGAttr('font-size-adjust')}}</dt>
 <dd>It specifies that the font size should be chosen based on the height of lowercase letters rather than the height of capital letters.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Number">&lt;number&gt;</a>|<code><strong>none</strong></code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-font-stretch">{{SVGAttr('font-stretch')}}</dt>
 <dd>It selects a normal, condensed, or expanded face from a font.<br>
 <small><em>Value</em>: see css {{cssxref('font-stretch')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-font-style">{{SVGAttr('font-style')}}</dt>
 <dd>It specifies whether a font should be styled with a normal, italic, or oblique face from its {{SVGAttr('font-family')}}.<br>
 <small><em>Value</em>: <strong><code>normal</code></strong>|<code>italic</code>|<code>oblique</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-font-variant">{{SVGAttr('font-variant')}}</dt>
 <dd>It specifies whether a font should be used with some of their variation such as small caps or ligatures.<br>
 <small><em>Value</em>: see css {{cssxref('font-variant')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-font-weight">{{SVGAttr('font-weight')}}</dt>
 <dd>It specifies the weight (or boldness) of the font.<br>
 <small><em>Value</em>: <strong><code>normal</code></strong>|<code>bold</code>|<code>lighter</code>|<code>bolder</code>|<code>100</code>|<code>200</code>|<code>300</code>|<code>400</code>|<code>500</code>|<code>600</code>|<code>700</code>|<code>800</code>|<code>900</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-glyph-orientation-horizontal">{{SVGAttr('glyph-orientation-horizontal')}} {{deprecated_inline('svg2')}}</dt>
 <dd>It controls glyph orientation when the inline-progression-direction is horizontal.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Angle">&lt;angle&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd>
 <dt id="attr-glyph-orientation-vertical">{{SVGAttr('glyph-orientation-vertical')}} {{deprecated_inline('svg2')}}</dt>
 <dd>It controls glyph orientation when the inline-progression-direction is vertical.<br>
 <small><em>Value</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Angle">&lt;angle&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>No</strong></small></dd>
 <dt id="attr-image-rendering">{{SVGAttr('image-rendering')}}</dt>
 <dd>It provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing.<br>
 <small><em>Value</em>: <strong><code>auto</code></strong>|<code>optimizeQuality</code>|<code>optimizeSpeed</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-kerning">{{SVGAttr('kerning')}} {{deprecated_inline('svg2')}}</dt>
 <dd>It indicates whether the browser should adjust inter-glyph spacing.<br>
 <small><em>Value</em>: <strong><code>auto</code></strong>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-letter-spacing">{{SVGAttr('letter-spacing')}}</dt>
 <dd>It controls spacing between text characters.<br>
 <small><em>Value</em>: <strong><code>normal</code></strong>|<a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-lighting-color">{{SVGAttr('lighting-color')}}</dt>
 <dd>It defines the color of the light source for filter primitives elements {{SVGElement('feDiffuseLighting')}} and {{SVGElement('feSpecularLighting')}}.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Color">&lt;color&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-marker-end">{{SVGAttr('marker-end')}}</dt>
 <dd>It defines the arrowhead or polymarker that will be drawn at the final vertex of the given {{SVGElement('path')}} element or basic shape.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-marker-mid">{{SVGAttr('marker-mid')}}</dt>
 <dd>It defines the arrowhead or polymarker that will be drawn at every vertex other than the first and last vertex of the given {{SVGElement('path')}} element or basic shape.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-marker-start">{{SVGAttr('marker-start')}}</dt>
 <dd>It defines the arrowhead or polymarker that will be drawn at the first vertex of the given {{SVGElement('path')}} element or basic shape.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#FuncIRI">&lt;FuncIRI&gt;</a>|<strong><code>none</code></strong>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-mask">{{SVGAttr('mask')}}</dt>
 <dd>It alters the visibility of an element by either masking or clipping the image at specific points.<br>
 <small><em>Value</em>: see css {{cssxref('mask')}}; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-opacity">{{SVGAttr('opacity')}}</dt>
 <dd>It specifies the transparency of an object or a group of objects.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-overflow">{{SVGAttr('overflow')}}</dt>
 <dd>Specifies whether the content of a block-level element is clipped when it overflows the element's box.<br>
 <small><em>Value</em>: <code><strong>visible</strong></code>|<code>hidden|scroll</code>|<code>auto</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-pointer-events">{{SVGAttr('pointer-events')}}</dt>
 <dd>Defines whether or when an element may be the target of a mouse event.<br>
 <small><em>Value</em>: <code>bounding-box</code>|<code><strong>visiblePainted</strong></code>|<code>visibleFil</code>|<code>visibleStroke</code>|<code>visible</code> |<code>painted</code>|<code>fill</code>|<code>stroke</code>|<code>all</code>|<code>none</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-shape-rendering">{{SVGAttr('shape-rendering')}}</dt>
 <dd>Hints about what tradeoffs to make as the browser renders {{SVGElement('path')}} element or basic shapes.<br>
 <small><em>Value</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>crispEdges</code>|<code>geometricPrecision</code> |<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-solid-color">{{SVGAttr('solid-color')}}</dt>
 <dd>-<br>
 <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd>
 <dt id="attr-solid-opacity">{{SVGAttr('solid-opacity')}}</dt>
 <dd>-<br>
 <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd>
 <dt id="attr-stop-color">{{SVGAttr('stop-color')}}</dt>
 <dd>Indicates what color to use at that gradient stop.<br>
 <small><em>Value</em>: <code>currentColor</code>|<a href="/en/SVG/Content_type#Color" title="en/SVG/Content_type#Color">&lt;color&gt;</a>|<a href="/en/SVG/Content_type#ICCColor" title="en/SVG/Content_type#ICCColor">&lt;icccolor&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stop-opacity">{{SVGAttr('stop-opacity')}}</dt>
 <dd>Defines the opacity of a given gradient stop.<br>
 <small><em>Value</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stroke">{{SVGAttr('stroke')}}</dt>
 <dd>Defines the color used to paint the outline of the shape.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Paint">&lt;paint&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stroke-dasharray">{{SVGAttr('stroke-dasharray')}}</dt>
 <dd>Defines the pattern of dashes and gaps used to paint the outline of the shape.<br>
 <small><em>Value</em>: <code>none</code>|<code>&lt;dasharray&gt;</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stroke-dashoffset">{{SVGAttr('stroke-dashoffset')}}</dt>
 <dd>Defines an offset on the rendering of the associated dash array.<br>
 <small><em>Value</em>: <a href="/en/SVG/Content_type#Percentage" title="en/SVG/Content_type#Percentage">&lt;percentage&gt;</a>|<a href="/en/SVG/Content_type#Length" title="en/SVG/Content_type#Length"><span>&lt;length&gt;</span></a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stroke-linecap"><strong>{{SVGAttr('stroke-linecap')}}</strong></dt>
 <dd>Defines the shape to be used at the end of open subpaths when they are stroked.<br>
 <small><em>Value</em>: <code><strong>butt</strong></code>|<code>round</code>|<code>square</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stroke-linejoin"><strong>{{SVGAttr('stroke-linejoin')}}</strong></dt>
 <dd>Defines the shape to be used at the corners of paths when they are stroked.<br>
 <small><em>Value</em>: <code>arcs</code>|<code>bevel</code>|<code><strong>miter</strong></code>|<code>miter-clip</code>|<code>round</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stroke-miterlimit"><strong>{{SVGAttr('stroke-miterlimit')}}</strong></dt>
 <dd>Defines a limit on the ratio of the miter length to the {{ SVGAttr("stroke-width") }} used to draw a miter join.<br>
 <small><em>Value</em>: <a href="/en/SVG/Content_type#Number" title="en/SVG/Content_type#Number">&lt;number&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stroke-opacity"><strong>{{SVGAttr('stroke-opacity')}}</strong></dt>
 <dd>Defines the opacity of the stroke of a shape.<br>
 <small><em>Value</em>: <a href="/en/SVG/Content_type#Opacity_value" title="en/SVG/Content_type#Opacity_value">&lt;opacity-value&gt;</a>|<a href="/docs/Web/SVG/Content_type#Paint">&lt;percentage&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-stroke-width"><strong>{{SVGAttr('stroke-width')}}</strong></dt>
 <dd>Defines the width of the stroke to be applied to the shape.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Length">&lt;length&gt;</a>|<a href="/docs/Web/SVG/Content_type#Percentage">&lt;percentage&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-text-anchor"><strong>{{SVGAttr('text-anchor')}}</strong></dt>
 <dd>Defines the vertical alignment a string of text.<br>
 <small><em>Value</em>: <code>start</code>|<code>middle</code>|<code>end</code>|<code><strong>inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-text-decoration"><strong>{{SVGAttr('text-decoration')}}</strong></dt>
 <dd>Sets the appearance of decorative lines on text.<br>
 <small><em>Value</em>: <code>none</code>|<code>underline</code>|<code>overline</code>|<code>line-through</code>|<code>blink</code>|<code><strong>inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-text-rendering"><strong>{{SVGAttr('text-rendering')}}</strong></dt>
 <dd>Hints about what tradeoffs to make as the browser renders text.<br>
 <small><em>Value</em>: <code><strong>auto</strong></code>|<code>optimizeSpeed</code>|<code>optimizeLegibility</code>|<code>geometricPrecision</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-transform"><strong>{{SVGAttr('transform')}}</strong></dt>
 <dd>Defines a list of transform definitions that are applied to an element and the element's children.<br>
 <small><em>Value</em>: <a href="/docs/Web/SVG/Content_type#Transform-list">&lt;transform-list&gt;</a>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-unicode-bidi"><strong>{{SVGAttr('unicode-bidi')}}</strong></dt>
 <dd>-<br>
 <small><em>Value</em>:; <em>Animatable</em>: <strong>-</strong></small></dd>
 <dt id="attr-vector-effect"><strong>{{SVGAttr('vector-effect')}}</strong></dt>
 <dd>Specifies the vector effect to use when drawing an object.<br>
 <small><em>Value</em>: <code>default</code>|<code>non-scaling-stroke</code>|<code>inherit</code>|<code>&lt;uri&gt;</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-visibility"><strong>{{SVGAttr('visibility')}}</strong></dt>
 <dd>Lets you control the visibility of graphical elements.<br>
 <small><em>Value</em>: <strong><code>visible</code></strong>|<code>hidden</code>|<code>collapse</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-word-spacing"><strong>{{SVGAttr('word-spacing')}}</strong></dt>
 <dd>Specifies spacing behavior between words.<br>
 <small><em>Value</em>: <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>|<code><strong title="this is the default value">inherit</strong></code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
 <dt id="attr-writing-mode"><strong>{{SVGAttr('writing-mode')}}</strong></dt>
 <dd>Specifies whether the initial inline-progression-direction for a {{SVGElement('text')}} element shall be left-to-right, right-to-left, or top-to-bottom.<br>
 <small><em>Value</em>: <strong><code>lr-tb</code></strong>|<code>rl-tb</code>|<code>tb-rl</code>|<code>lr</code>|<code>rl</code>|<code>tb</code>|<code>inherit</code>; <em>Animatable</em>: <strong>Yes</strong></small></dd>
</dl>

<h2 id="Browser_compatibility">Browser compatibility</h2>



<p>{{Compat("svg.attributes.presentation")}}</p>