-
Notifications
You must be signed in to change notification settings - Fork 1
/
svg-polygon-textpath.htm
124 lines (108 loc) · 3.49 KB
/
svg-polygon-textpath.htm
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Convex Polygons - Side Length Align</title>
<script type="text/javascript" src="highlight.pack.js"></script>
<script type="text/javascript" src="highlightCode.js"></script>
<link href='highlight.css' rel='stylesheet' />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body style='padding:0px;font-family:arial;background:#f0f8ff'>
<center>
<h4>Convex Polygons - Side Length Align</h4>
<div style='width:90%;background-color:gainsboro;text-align:justify;padding:10px;border-radius:10px;'>
Compute, and show the length, of each side. Align the length values with side, and center-located <b>inside</b> the polygon. Uses the <b>path element</b> with <b>textPath</b> The path element has no stroke or fill, used only to support textPath.
</div>
<div id="svgDiv" style='background-color:red;width:400px;height:400px;'>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="mySVG" width="400" height="400">
<polygon id="myPolygon" fill="yellow" stroke="blue" stroke-width="1" points="380,80 200,10 40,80 100,320 300,350" />
</svg>
</div>
<br /><button onClick=showSideLength()>Show Side Length</button>
<br /> SVG Source:
<div id=svgSourceDiv style=overflow:auto;width:100%;height:1px;text-align:left; /></div>
Javascript:
<div id=jsCodeDiv style=overflow:auto;width:100%;text-align:left; /></div>
</center>
<script id=myScript>
var NS="http://www.w3.org/2000/svg"
//---button---
function showSideLength()
{
var pointList=myPolygon.points
var n=pointList.numberOfItems
for(var k=0;k<n;k++)
{
var x1=pointList.getItem(k).x
var y1=pointList.getItem(k).y
if(k<n-1)
{
var x2=pointList.getItem(k+1).x
var y2=pointList.getItem(k+1).y
}
else
{
var x2=pointList.getItem(0).x
var y2=pointList.getItem(0).y
}
var ln=Math.sqrt( (x2-x1)*(x2-x1)+(y2-y1)*(y2-y1) )
var lnRnd=Math.round(ln*100)/100
createTextPath(x1,y1,x2,y2,lnRnd)
}
showSourceSVG()
}
var Xlink='http://www.w3.org/1999/xlink'
var TextPathCnt=0
function createTextPath(x1,y1,x2,y2,lnRnd)
{
TextPathCnt++
//--aligns text so not upside down, and inside polygon---
if(x2>=x1)
{
var d="M"+x1+" "+y1+"L"+x2+" "+y2
var dy= "-.25em"
/*--outside---
var dy= ".75em"
*/
}
else
{
var d="M"+x2+" "+y2+"L"+x1+" "+y1
var dy= ".75em"
/*--outside---
var dy= "-.25em"
*/
}
var path=document.createElementNS(NS,"path")
path.setAttribute("id","textPathPath"+TextPathCnt)
path.setAttribute("d",d)
path.setAttribute("fill","none")
path.setAttribute("stroke","none")
mySVG.appendChild(path)
var myText=document.createElementNS(NS,"text")
var textPath=document.createElementNS(NS,"textPath")
textPath.setAttribute( "id","textPath"+TextPathCnt)
textPath.setAttributeNS(Xlink,"href","#textPathPath"+TextPathCnt)
textPath.setAttribute("startOffset","50%")
textPath.setAttribute("stroke","none")
textPath.setAttribute("font-family","arial")
textPath.setAttribute("fill","black")
textPath.setAttribute("text-anchor","middle")
textPath.setAttribute("font-size",12)
myText.setAttribute("dy",dy)
var textNode=document.createTextNode(lnRnd)
textPath.appendChild(textNode)
myText.appendChild(textPath)
mySVG.appendChild(myText)
}
</script>
<script>
document.addEventListener("onload",init(),false)
function init()
{
showSourceSVG()
showSourceJS()
}
</script>
</body>
</html>