SVG: draw text on a image

 

?
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>geovindu</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
      <script  src="js/jquery-3.6.0.js"></script>
  <script src="ajax/libs/modernizr/2.8.3/modernizr.min.js" type="text/javascript"></script>
  <link rel='stylesheet' href='bootstrap/4.6.2/css/bootstrap.min.css'>
  <link rel="stylesheet" href="css/main.css">
</head>
 
<body>   
    <div class="container">
    <h1>Non-Scaling SVG</h1>
<svg class="defs-only" xmlns="http://www.w3.org/2000/svg">
    <linearGradient id="coin" x2="50%" y2="40%" spreadMethod="reflect">
        <stop stop-color="gold" offset="30%" />
        <stop stop-color="goldenrod" offset="70%" />
        <stop stop-color="white" offset="82%" />
        <stop stop-color="gold" offset="92%" />
        <stop stop-color="darkgoldenrod" offset="100%" />
    </linearGradient>
    <radialGradient id="pot" fx="30%" fy="35%">
        <stop stop-color="white" offset="0%" />
        <stop stop-color="gold" offset="15%" />
        <stop stop-color="goldenrod" offset="80%" />
        <stop stop-color="darkgoldenrod" offset="100%" />
    </radialGradient>
    <symbol id="potofgold" >
        <g fill="url(#coin)" stroke="darkgoldenrod" stroke-width="0.5">
            <circle r="5" transform="translate(30,7)" />
            <circle r="5" transform="translate(35,13)" />
            <circle r="5" transform="translate(22,10)" />
            <circle r="5" transform="translate(27,9)" />
            <circle r="5" transform="translate(18,17)" />
            <circle r="5" transform="translate(42,18)" />
            <circle r="5" transform="translate(32,19)" />
            <circle r="5" transform="translate(30,14)" />
            <circle r="5" transform="translate(25,15)" />
            <circle r="5" transform="translate(37,19)" />
            <circle r="5" transform="translate(31,16)" />
            <circle r="5" transform="translate(20,18)" />
            <circle r="5" transform="translate(26,21)" />
        </g>
        <path fill="url(#pot)" stroke="#751" stroke-width="0.5"
              d="M30,50 C45,50 55,45 55,35 
                 Q 55,27 50,25 C55,22 53,15 45,20
                 S 23,25 15,20 S5,22 10,25
                 Q 5,27 5,35 C5,45 15,50 30,50Z"
          />
    </symbol>
</svg>
 
<figure>
  <figcaption>50x25</figcaption>
  <div>
    <svg width="50" height="25">
      <use xlink:href="#potofgold"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>100x50</figcaption>
  <div>
    <svg width="100" height="50">
      <use xlink:href="#potofgold"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>200x100</figcaption>
  <div>
    <svg width="200" height="100">
      <use xlink:href="#potofgold"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>200x50</figcaption>
  <div>
    <svg width="200" height="50">
      <use xlink:href="#potofgold"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>50x50</figcaption>
  <div>
    <svg width="60" height="50">
      <use xlink:href="#potofgold"/>
    </svg>
  </div>
</figure>
<figure>
  <figcaption>Default Size</figcaption>
  <div>
    <svg>
      <use xlink:href="#potofgold"/>
    </svg>
  </div>
</figure>
         
     
         
</div>   
     
    <div class="Charting" id="MetricContainer"  width="500" height="500" style="height:100%;width:100%;">
        <svg height="100%" width="100%" viewBox="0 0 500 525">
            <g>
            <image x="20" y="20" xlink:href="./pc/1.png">
             
                <text x="10"  y="20"  transform="rotate(25 40,50)" fill="red">Rotated SVG text</text>
            <text x="10" y="150" transform="rotate(55 40,50)" fill="#000000">2022-11-20</text>
                <text x="20"  y="40"
          transform="rotate(30 20,40)"
          style="stroke:none; fill:#000000;"
          >Rotated SVG text</text>
            </g> 
        </svg></div>
    <svg xmlns="http://www.w3.org/2000/svg"> 
  <text x="10" y="20" style="writing-mode: tb;">
    Vertical
  </text>
</svg>  
    <img src="flower.svg" class="fa-square-full"/>
     
    <svg xmlns="http://www.w3.org/2000/svg"> 
  <text x="10" y="20" style="writing-mode: tb;">
    垂直文字
  </text>
</svg>   
    <svg xmlns="http://www.w3.org/2000/svg"> 
  <text x="20"  y="40"
          transform="rotate(30 20,40)"
          style="stroke:none; fill:#000000;"
          >Rotated SVG text</text>
</svg>
<div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<image x="20" y="20"
   xlink:href="./pc/1.png" />
  
 
  <text id="txt" x="180" y="770" transform="rotate(5 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
 
    </svg>
        </div>       
<div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<image x="20" y="20"
   xlink:href="./pc/2.png" />
  
 
  <text id="txt" x="210" y="750" transform="rotate(3 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
 
    </svg>
        </div>
         
        <div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<image x="20" y="20"
   xlink:href="./pc/4.png" />
  
 
  <text id="txt" x="210" y="760" transform="rotate(-13 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
 
    </svg>
        </div>   
        <div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<image x="20" y="20"
   xlink:href="./pc/5.png" />
  
 
  <text id="txt" x="180" y="740" transform="rotate(-4 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
 
    </svg>
        </div>   
            <div class="container">
<svg width="100%" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
<image x="20" y="20"
   xlink:href="./pc/6.png" />
  
 
  <text id="txt" x="180" y="730" transform="rotate(-1 180,250)" style="fill:#000;">geovindu,革命尚未成功，努力仍将继续！</text>
 
    </svg>
        </div>   
         
</body>
</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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
   "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg width="150" height="200" viewBox="0 0 150 200"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
 
  <title>Flower SVG File</title>
 
  <defs>
    <g id="petal">
      <path d="M 10 0 Q 27 -15 40 0 27 15 10 0" />
    </g>
  </defs>
  <filter id="glow">
   <feColorMatrix type="matrix" values="0 0 0 0  0
                                        0 0 0 0.9 0
                                        0 0 0 0.9 0
                                        0 0 0 0 1 0"></feColorMatrix>
    <feGaussianBlur stdDeviation="2.5" result="coloredBlur"></feGaussianBlur>
     <feMerge>
      <feMergeNode in="coloredBlur"></feMergeNode>
      <feMergeNode in="SourceGraphic"></feMergeNode>
      </feMerge>
     
     
</filter>
 
  <g id="flower">
       
    <path  d="M 50 50 Q 40 70, 70 100 T 70 150"
      style="stroke: green; fill: none; stroke-width: 3;"/>
    <path d="M 70 100 Q 80 70, 120 80, 90 75, 75 105"
      style="stroke: none; fill: green;"/>
    <circle cx="40" cy="50" r="10" style="fill: gray;"/>
    <g style="stroke: black; fill: yellow;">
      <use xlink:href="#petal" transform="translate(40,50)"/>
      <use xlink:href="#petal" transform="translate(40,50)
        rotate(40)"/>
      <use xlink:href="#petal" transform="translate(40,50)
        rotate(80)"/>
      <use xlink:href="#petal" transform="translate(40,50)
        rotate(120)"/>
      <use xlink:href="#petal" transform="translate(40,50)
        rotate(160)"/>
      <use xlink:href="#petal" transform="translate(40,50)
        rotate(200)"/>
      <use xlink:href="#petal" transform="translate(40,50)
        rotate(240)"/>
      <use xlink:href="#petal" transform="translate(40,50)
        rotate(280)"/>
      <use xlink:href="#petal" transform="translate(40,50)
        rotate(320)"/>
    </g>
       
  </g>
    <text x="90" y="50" style="filter: url(#glow)fill:#003333; font-size: 18;">Sping<tspan x="90" y="70">Flower</tspan></text>
</svg>

　　

 

?
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
 
<svg width="400" height="250" viewBox="0 0 400 250"
  onload="init(evt)"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
 
  <defs>
    <script type="text/ecmascript"><![CDATA[
      var scaleChoice = 1;
      var scaleFactor = [1.25, 1.5, 1.75];
      var slideChoice = -1;
      var rgb = [100, 100, 100];
 
 
      function init(evt)
      {
        var obj;
        for (var i = 0; i < 3; i++) {
          obj = document.getElementById("scale" + i);
          obj.addEventListener("click", clickButton, false);
 
          obj = document.getElementById("sliderGroup" + i);
          obj.addEventListener("mousedown", startColorDrag, false);
          obj.addEventListener("mousemove", doColorDrag, false);
          obj.addEventListener("mouseup", endColorDrag, false);
        }
        document.getElementById("eventCatcher").
          addEventListener("mouseup", endColorDrag, false);
 
        if (parent) {
          parent.setShirtColor = svgSetShirtColor;
        }
 
        transformShirt();
 
      }
 
      function clickButton(evt)
      {
        var choice = evt.target.parentNode
        var name = choice.getAttribute("id");
        var old = document.getElementById("scale" + scaleChoice);
        old.removeAttribute("class");
        choice.setAttribute("class", "selected");
 
        scaleChoice = parseInt(name[name.length - 1]);
        transformShirt();
      }
 
      function transformShirt()
      {
        var factor = scaleFactor[scaleChoice];
        var obj = document.getElementById("shirt");
        obj.setAttribute("transform",
          "translate(150, 150) " +
          "scale(" + factor + ")");
        obj.setAttribute("stroke-width",
          1 / factor);
      }
 
      /*
      * Stop dragging the current slider (if any)
      * and set the current slider to the one specified.
      * (0 = red, 1 = green, 2 = blue)
      */
      function startColorDrag(evt)
      {
        var sliderId = evt.target.parentNode.getAttribute("id");
        endColorDrag( evt );
        slideChoice = parseInt(sliderId[sliderId.length - 1]);
      }
 
      /*
      * Set slider choice to -1, indicating that no
      * slider is begin dragged. No access to the event
      * is needed for this function.
      */
      function endColorDrag( )
      {
       /*
        * If a slider was being moved, send the slider number
        * and its value back to the updateHTMLField function
        * in the parent web browser window.
        */
        if (slideChoice >= 0)
        {
          if (parent)
          {
            parent.updateHTMLField(slideChoice, rgb[slideChoice]);
          }
        }
        // In any case, nobody's being dragged now
        slideChoice = -1;
      }
 
      function svgSetShirtColor(which, percent)
      {
        var obj;
        var colorStr;
        var newText;
 
        if (percent < 0) { percent = 0; }
        if (percent > 100) { percent = 100; }
 
        obj = document.getElementById("slide" + which);
        obj.setAttribute("y1", 100 - percent);
        obj.setAttribute("y2", 100 - percent);
        rgb[which] = percent;
 
        colorStr = "rgb(" + rgb[0] + "%," +
          rgb[1] + "%," + rgb[2] + "%)";
        obj = document.getElementById("shirt");
        obj.style.setProperty("fill", colorStr, null);
      }
 
 
      function doColorDrag(evt)
      {
        if (slideChoice >= 0)
        {
          var sliderId = evt.target.parentNode.getAttribute("id");
          chosen = parseInt(sliderId[sliderId.length - 1]);
          if (slideChoice == chosen)
          {
            svgSetShirtColor(slideChoice, 100 - (evt.clientY - 10));
          }
        }
      }
 
    ]]></script>
 
    <style type="text/css" > <![CDATA[
      svg { /* default values */
        stroke: black;
        fill: white;
      }
      g.selected rect {
        fill: #ffc; /* light yellow */
      }
      text {
        stroke: none;
        fill:black;
        text-anchor: middle;
      }
      g.slider rect {
        stroke: none; /* default white fill still applies */
      }
      line.slider {
        stroke: gray;
        stroke-width: 2;
      }
    ]]></style>
 
    <path id="shirt-outline"
      d="M -6 -30 -32 -19 -25.5 -13 -22 -14 -22 30 23 30
        23 -14 26.5 -13 33 -19 7 -30
        A 6.5 6 0 0 1 -6 -30"/>
  </defs>
 
  <rect id="eventCatcher" x="0" y="0" width="400" height="300"
    style="fill: none; stroke:none;" pointer-events="visible" />
 
  <g id="shirt" >
    <use xlink:href="#shirt-outline" x="0" y="0"/>
  </g>
 
  <g id="scale0" >
    <rect x="100" y="10" width="30" height="30" />
    <text x="115" y="30">S</text>
  </g>
 
  <g id="scale1" class="selected">
    <rect x="140" y="10" width="30" height="30" />
    <text x="155" y="30">M</text>
  </g>
 
  <g id="scale2" >
    <rect x="180" y="10" width="30" height="30" />
    <text x="195" y="30">L</text>
  </g>
 
  <g id="sliderGroup0" transform="translate( 230, 10 )">
    <rect x="-10" y="-5" width="40" height="110"/>
    <rect x="5" y="0" width="10" height="100" style="fill: red;"/>
    <line id="slide0" class="slider"
      x1="0" y1="0" x2="20" y2="0" />
  </g>
 
  <g id="sliderGroup1" transform="translate( 280, 10 )">
    <rect x="-10" y="-5" width="40" height="110"/>
    <rect x="5" y="0" width="10" height="100" style="fill: green;"/>
    <line id="slide1" class="slider"
      x1="0" y1="0" x2="20" y2="0" />
  </g>
 
  <g id="sliderGroup2" transform="translate( 330, 10 )">
    <rect x="-10" y="-5" width="40" height="110"/>
    <rect x="5" y="0" width="10" height="100" style="fill: blue;"/>
    <line id="slide2" class="slider"
      x1="0" y1="0" x2="20" y2="0" />
  </g>
 
</svg>

　　

https://github.com/heathcliff/css3-mediaqueries-js

https://github.com/GestiXi/image-scale


https://github.com/sdras/svg-workshop
https://github.com/oreillymedia/svg-essentials-examples

　

 

 

posted @   ®Geovin Du Dream Park™  阅读(21)  评论(0)  编辑  收藏  举报
相关博文：
·  SVG: Draw text
·  SVG: size
·  SVG XML 格式定义图形入门介绍
·  svg矢量图
·  史上最全SVG开源项目
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2009-12-06 Microsoft Visual Studio International Pack 1.0 SR1
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 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 1 2 3 4 5
点击右上角即可分享
微信分享提示