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
|
{% set logo_width = 14 if logo else 0 %}
{% set logo_padding = 3 if (logo and left_text) else 0 %}
{% set image_width = 107 if center_image else 0 %}
{% set left_width = left_text_width + 10 + logo_width + logo_padding %}
{% set center_width = image_width + 10 if center_image else 0 %}
{% set right_width = center_width + right_text_width + 10 if right_text else 0 %}
{% set id_smooth = 'smooth' + id_suffix %}
{% set id_round = 'round' + id_suffix %}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{ left_width + right_width }}" height="20">
{% if whole_title %}
<title>{{ whole_title }}</title>
{% endif %}
<linearGradient id="{{ id_smooth }}" x2="0" y2="100%">
<stop offset="0" stop-color="#bbb" stop-opacity=".1"/>
<stop offset="1" stop-opacity=".1"/>
</linearGradient>
<clipPath id="{{ id_round }}">
<rect width="{{ left_width + right_width }}" height="20" rx="3" fill="#fff"/>
</clipPath>
<g clip-path="url(#{{ id_round }})">
<rect width="{{ left_width }}" height="20" fill="{{ left_color }}">
{% if left_title %}
<title>{{ left_title }}</title>
{% endif %}
</rect>
{% if center_image %}
<rect x="{{ left_width }}" width="{{ center_width }}" height="20" fill="{{ center_color }}">
{% if center_title %}
<title>{{ center_title }}</title>
{% endif %}
</rect>
{% endif %}
<rect x="{{ left_width + center_width }}" width="{{ right_width }}" height="20" fill="{{ right_color }}">
{% if right_title %}
<title>{{ right_title }}</title>
{% endif %}
</rect>
<rect width="{{ left_width + right_width }}" height="20" fill="url(#{{ id_smooth }})"/>
</g>
<g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="110">
{% if logo %}
<image x="5" y="3" width="{{ logo_width }}" height="14" xlink:href="{{ logo}}"/>
{% endif %}
<text x="{{ (((left_width+logo_width+logo_padding)/2)+1)*10 }}" y="150" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="{{ (left_width-(10+logo_width+logo_padding))*10 }}" lengthAdjust="spacing">{{ left_text }}</text>
<text x="{{ (((left_width+logo_width+logo_padding)/2)+1)*10 }}" y="140" transform="scale(0.1)" textLength="{{ (left_width-(10+logo_width+logo_padding))*10 }}" lengthAdjust="spacing">{{ left_text }}</text>
{% if center_image %}
<image x="{{ left_width }}" y="3" width="{{ center_width }}" height="14" xlink:href="{{ center_image }}"/>
{% endif %}
{% if right_image %}
<image x="{{ left_width + center_width }}" y="3" width="{{ right_width }}" height="14" xlink:href="{{ right_image }}"/>
{% endif %}
{% if right_text %}
<text x="{{ (left_width+center_width/2+right_width/2-1)*10 }}" y="150" fill="#010101" fill-opacity=".3" transform="scale(0.1)" textLength="{{ (right_width-center_width-10)*10 }}" lengthAdjust="spacing">{{ right_text }}</text>
<text x="{{ (left_width+center_width/2+right_width/2-1)*10 }}" y="140" transform="scale(0.1)" textLength="{{ (right_width-center_width-10)*10 }}" lengthAdjust="spacing">{{ right_text }}</text>
{% endif %}
{% if left_link or whole_link %}
<a xlink:href="{{ left_link or whole_link }}">
<rect width="{{ left_width }}" height="20" fill="rgba(0,0,0,0)"/>
</a>
{% endif %}
{% if center_image and (center_width or whole_link) %}
<a xlink:href="{{ center_link or whole_link }}">
<rect x="{{ left_width }}" width="{{ center_width }}" height="20" fill="rgba(0,0,0,0)"/>
</a>
{% endif %}
{% if right_link or whole_link %}
<a xlink:href="{{ right_link or whole_link }}">
<rect x="{{ left_width + center_width }}" width="{{ right_width }}" height="20" fill="rgba(0,0,0,0)"/>
</a>
{% endif %}
</g>
</svg>
|
