SVG TextPathElement.startOffset属性返回与给定textpath元素的属性对应的SVGAnimatedLength对象。
用法:
TextPathElement.startOffset
返回值:此属性返回SVGAnimatedLength对象,该对象可用于获取TextPath元素的startOffset。
范例1:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 200 500"
xmlns="http://www.w3.org/2000/svg">
<path id="Geek" fill="yellow" stroke="green"
d="M10, 90 Q90, 90 90, 45 Q90, 10 50, 10 Q10,
10 10, 40 Q10, 70 45, 70 Q70, 70 75, 50" />
<text>
<textPath href="#Geek" id="gfg"
startoffset="10" >
The Geeky Text Along The Path
</textPath>
</text>
<script type="text/javascript">
var gfg = document.getElementById('gfg');
console.log(gfg.startOffset);
</script>
</svg>
</body>
</html>
输出:
- 控制台输出:
范例2:
HTML
<!DOCTYPE html>
<html>
<body>
<svg viewBox="0 0 200 500"
xmlns="http://www.w3.org/2000/svg">
<path id="Geek" fill="red" stroke="green"
d="M10, 90 Q90, 90 90, 45 Q90, 10 50, 10 Q10,
10 10, 40 Q10, 70 45, 70 Q70, 70 75, 50" />
<text>
<textPath href="#Geek" id="gfg" startoffset="10" >
gfg a computer science platform
</textPath>
</text>
<script type="text/javascript">
var gfg = document.getElementById('gfg');
console.log(gfg.startOffset);
</script>
</svg>
</body>
</html>
输出:
- 控制台输出:
相关用法
- SVG RectElement.rx属性用法及代码示例
- SVG RectElement.height属性用法及代码示例
- SVG CircleElement.r属性用法及代码示例
- SVG CircleElement.cy属性用法及代码示例
- SVG EllipseElement.rx属性用法及代码示例
- SVG EllipseElement.ry属性用法及代码示例
- SVG EllipseElement.cy属性用法及代码示例
- SVG LinearGradientElement.x1属性用法及代码示例
- SVG LinearGradientElement.x2属性用法及代码示例
- SVG namespaceURI属性用法及代码示例
- SVG RectElement.x属性用法及代码示例
- SVG UseElement.x属性用法及代码示例
- SVG UseElement.y属性用法及代码示例
- SVG UseElement.height属性用法及代码示例
- SVG UseElement.width属性用法及代码示例
- SVG RectElement.y属性用法及代码示例
- SVG LineElement.y1属性用法及代码示例
- SVG LineElement.y2属性用法及代码示例
- SVG EllipseElement.cx属性用法及代码示例
- SVG LineElement.x2属性用法及代码示例
注:本文由纯净天空筛选整理自taran910大神的英文原创作品 SVG TextPathElement.startOffset Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。