-
Notifications
You must be signed in to change notification settings - Fork 0
/
svg-text-tspan-rtl-repro.html
42 lines (36 loc) · 1.57 KB
/
svg-text-tspan-rtl-repro.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Playground</title>
</head>
<body>
<h1>This is a Safari's bug repro when rendering RTL SVG text</h1>
<svg height="240" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- Border -->
<rect width="120" height="120" style="stroke:pink;fill:white;stroke-width:3;" />
<path d="M60,5 L60,115 M5,60 L115,60" stroke="pink" />
<g transform="translate(60,0)">
<text x="60" y="60" tabindex="0" focusable="true"
style="fill: rgb(96, 94, 92); font-weight: bold; font-family: helvetica, arial, sans-serif; font-size: 12px; text-anchor: middle;">
<tspan x="0" dy="0">Hello, today is</tspan>
<tspan x="0" dy="15.96875" style="fill: lightsalmon">Thursday!</tspan>
<title>This is the title</title>
</text>
</g>
</svg>
<svg height="240" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
<!-- Border -->
<rect width="120" height="120" style="stroke:pink;fill:white;stroke-width:3;" />
<path d="M60,5 L60,115 M5,60 L115,60" stroke="pink" />
<g transform="translate(60,0)">
<text x="60" y="60" tabindex="0" focusable="true"
style="fill: rgb(96, 94, 92); font-weight: bold; font-family: helvetica, arial, sans-serif; font-size: 12px; text-anchor: middle;">
<tspan x="0" dy="0">دولة الإمارات العربية</tspan>
<tspan x="0" dy="20" style="fill: lightsalmon">المتحدة</tspan>
<title>دولة الإمارات العربية المتحدة</title>
</text>
</g>
</svg>
</body>
</html>