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
|
<?xml version="1.0"?>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 -200 700 700">
<title>Multilingual textflow</title>
<desc>Text flow with Japanese text, and styled spans.</desc>
<flowRoot>
<flowRegion>
<use xlink:href="#G"/>
<use xlink:href="#O"/>
<use xlink:href="#bang"/>
</flowRegion>
<flowDiv font-size="9">
<flowPara>
The paragraph contains <flowSpan fill="red">spans of text styled
differently</flowSpan> as well as
forced <flowLine/>line breaks. The text flows from one child of the 're­gion'
element to another. This example has three regions, shaped like
the letters 'G', 'O' and '!" respectively.
</flowPara>
<flowPara fill="#707">The text flow algorithm
wraps on spaces if it can
find them, otherwise it will break in the middle
of a word. This is needed for Japanese and
Chinese text where there are no spaces between
words like this:
<!-- <flowSpan xml:lang="ja-JP"
font-family="'MS Gothic', hiragino,
ＭＳ ゴシック,'MS Mincho',ＭＳ 明朝,' Arial Unicode MS'
"
>なぜ、みんな日本語を話してくれないのか？</flowSpan>-->
</flowPara>
<flowPara fill="green">
If you need to implement Japanese
<flowSpan font-style="italic">kinsoku</flowSpan> rules for
line breaking, you will have to insert Unicode zero-width-joiner (zwj)
characters to forbid certain line breaks when generating the text.
</flowPara>
<flowPara fill="blue">Here is a third paragraph. The text is in blue to
show where the second paragraph ends and a third one begins. It will
not win any design awards.</flowPara>
</flowDiv>
</flowRoot>
<g fill="none" stroke="green" stroke-width="1">
<path id="G" d="M133.5,110.4c0-10.6-1.2-17.7-3.5-21.1c-2.3-3.4-6.5-5.7-12.5-6.8v-7h91v7c-6,1.1-10.2,3.4-12.5,6.8
c-2.3,3.4-3.5,10.4-3.5,21.1v37.5c0,10.6,1.1,17.6,3.4,20.9s6.5,5.5,12.6,6.7v6.5H166c-9.5,0-20,0.3-31.5,0.8s-18.3,0.8-20.4,0.8
c-35.4,0-63.2-8.8-83.6-26.5C10.2,139.4,0,115.3,0,84.8c0-26.4,8.3-47,24.9-61.7C41.5,8.4,64.7,1,94.6,1c9.1,0,19.2,0.9,30.3,2.8
c11.1,1.8,17.9,2.8,20.5,2.8c2.5,0,5.3-0.5,8.3-1.5c3-1,6.7-2.7,11-5.1l8.9,58h-6.9c-7.7-11.9-15.9-20.6-24.8-26.2
c-8.8-5.6-18.9-8.3-30.1-8.3c-16.8,0-30.1,5.4-39.8,16.1c-9.7,10.8-14.5,25.5-14.5,44.1c0,22.9,5.3,42,16,57.3
c10.7,15.3,23.7,23,39,23c7.8,0,13.3-1.7,16.4-5.1c3.1-3.4,4.6-10.9,4.6-22.5V110.4z"/>
<path id="O" d="M223.1,93.4c0-26.4,9.9-48.5,29.8-66.2c19.9-17.8,44.5-26.6,73.8-26.6c29.3,0,54,8.9,73.9,26.6
c19.9,17.8,29.9,39.8,29.9,66.2c0,26.4-9.9,48.4-29.8,66.1s-44.6,26.5-74,26.5c-29.3,0-54-8.8-73.8-26.5S223.1,119.8,223.1,93.4z
M323.8,23.5c-12,0-21.3,5-28.1,14.9c-6.7,9.9-10.1,23.8-10.1,41.4c0,25.2,4.1,45.3,12.4,60.5s19.2,22.7,32.7,22.7
c11.9,0,21.2-4.9,27.9-14.8c6.7-9.9,10-23.7,10-41.5c0-25.1-4.1-45.2-12.4-60.4C348,31.1,337.2,23.5,323.8,23.5z"/>
<path id="bang" d="M458.5,127c2.1-11.7,3.6-21.9,4.5-30.6c0.9-8.7,1.3-16.6,1.3-23.7c0-10.1-1-20.7-2.9-31.8s-5-23.2-9.2-36.4h74
c-6,13.5-10.4,26.8-13.1,40.1C510.4,58,509,72.1,509,87.1c0,3.4,0.2,8.2,0.5,14.4s0.8,13.3,1.5,21.3c-4.5-0.9-8.4-1.6-11.7-2.1
s-6.1-0.7-8.5-0.7c-6.7,0-12.6,0.6-17.6,1.7C468.1,122.8,463.2,124.5,458.5,127z M484.7,130.5c9.6,0,17.4,2.5,23.2,7.6
c5.9,5,8.8,11.7,8.8,19.9c0,8.2-2.9,14.8-8.8,19.9c-5.9,5.1-13.6,7.6-23.2,7.6s-17.3-2.5-23.2-7.6c-5.8-5-8.8-11.7-8.8-19.9
c0-8.3,2.9-14.9,8.8-19.9C467.3,133,475.1,130.5,484.7,130.5z"/>
</g>
</svg>
|
