Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/text/reftests/textpath-side-right-startoffset.svg - WPT Dashboard Interop Dashboard
SVG Preview (Scaled)
<svg width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg" xmlns:html="http://www.w3.org/1999/xhtml">
<title>textPath side="right" measures startOffset from the end of the original path</title>
<metadata>
<html:link rel="author" title="Karl Dubost" href="mailto:k_dubost@apple.com"/>
<html:link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/text.html#TextPathElementSideAttribute"/>
<html:link rel="help" href="https://w3c.github.io/svgwg/svg2-draft/text.html#TextPathElementStartOffsetAttribute"/>
<html:link rel="match" href="textpath-side-right-startoffset-ref.svg"/>
<html:meta name="assert" content="The path is reversed before startOffset is applied, so with side=right the offset counts from the original end point."/>
</metadata>
<html:link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
<style>
text { font-family: Ahem; font-size: 20px; }
</style>
<path id="p" d="M 50,100 L 350,100" fill="none" stroke="lightblue"/>
<text>
<textPath href="#p" side="right" startOffset="100"><tspan fill="blue">XXX</tspan><tspan fill="orange">XXX</tspan></textPath>
</text>
</svg>