SVG: Draw text

 

?
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
<!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>SVG draw text</title>
<meta name="Description" content="geovindu"/>
<meta name="Keywords" content="geovindu"/>
<meta name="author" content="geovindu"/>
<style>
html, body
{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
 
#sp
{
    display: block;
    width: 100%;
    height: 100%;
    margin: auto;
    font-family: verdana, sans-serif;
    font-size: 570%;
    fill: #003565;
}
    </style>
</head>
 
<body>
<svg xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink"  version="1.1" width="450" height="450" viewBox="0 0 450px 355px">
    <text x="10"  y="20"  transform="rotate(-5 40,50)" fill="red">Rotated SVG text</text>
    <text x="10"  y="20"  transform="rotate(5 40,50)" fill="blue">geovinu love you</text>
      <text id="parent" font-family="Arial, sans-serif" font-size="32" fill="red" x="40" y="40"
    rotate="5,15,25,35,45,55">
    Not
 
    <tspan id="child1" rotate="-10,-20,-30,-40" fill="orange">
      all characters
 
      <tspan id="child2" rotate="70,60,50,40,30,20,10" fill="yellow">
        in
 
        <tspan id="child3">
          the
        </tspan>
      </tspan>
 
      <tspan id="child4" fill="orange" x="40" y="90">
        text
      </tspan>
 
      have a
    </tspan>
 
    <tspan id="child5" rotate="-10" fill="blue">
      specified
    </tspan>
 
    rotation
  </text>
     
</svg>   
     
<svg  version="1.1" height="400" width="550">
 <path d="M 0 100 
          L 100 100 
          A 100 100 0 1 1 300 100
          L 400 100 " stroke="black" stroke-width="1" fill="none"></path>   
</svg>   
     
    <div style="background:#cccccc;">
    <object id="sp" type="image/svg+xml" data="sitepoint.xml">SitePoint</object>       
</div>
<svg xmlns="https://www.w3.org/2000/svg" viewBox="50 20 2050 680" preserveAspectRatio="xMidYMid meet">
    <title>SitePoint</title>
    <desc>The SitePoint Logo</desc>
    <g id="main">
<polyline points="100,100 150,100 170,150 120,150" fill="#003565"/>
        <polyline points="170,100 220,100 240,150 190,150" fill="#003565"/>
        <polyline points="120,45 170,45 150,95 100,95"  fill="#ff6400"/>
        <polyline points="190,155 240,155 220,205 170,205"  fill="#ff6400"/>
     <text id="sp" x="240" y="150">sitepoint</text>
    </g>
</svg>
</body>
</html>

　　

xml:

?
1
sitepoint.xml
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<?xml-stylesheet href="sp-styles.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="95 40 550 180" preserveAspectRatio="xMidYMid meet">
    <title>SitePoint</title>
    <desc>The SitePoint Logo</desc>
    <g id="main">
        <polyline points="100,100 150,100 170,150 120,150" />
        <polyline points="170,100 220,100 240,150 190,150" />
 
        <polyline class="orange" points="120,45 170,45 150,95 100,95" />
        <polyline class="orange" points="190,155 240,155 220,205 170,205" />
 
        <text id="sp" x="240" y="150">sitepoint</text>
    </g>
</svg>

　　

?
1
sp-styles.css:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
@charset "utf-8";
/* CSS Document https://www.sitepoint.com/svg-styling-with-css/*/
 
/* SVG styles */
polyline
{
    stroke: 0;
    stroke-linejoin: butt;
    fill: #003565;
}
 
polyline.orange
{
    fill: #ff6400;
}
 
text#sp
{
    font-family: verdana, sans-serif;
    font-size: 570%;
    fill: #003565;
}

　　

 

 

https://visionary.com/blog/making-an-animated-svg-checkbox/
https://www.svgviewer.dev/ 编辑SVG大小
https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths
https://vega.github.io/vega/docs/marks/path/
https://github.com/vega/vega
https://parceljs.org/languages/svg/
https://github.com/parcel-bundler/website

https://github.com/jamesmh/coravel
https://css-tricks.com/accessible-svgs/
https://jakearchibald.github.io/svgomg/
https://jenkov.com/tutorials/svg/text-element.html
https://developer.mozilla.org/en-US/docs/Web/CSS/shape-outside
https://www.jayfreestone.com/writing/wrappping-text-inside-svg-css/
https://www.w3.org/TR/SVG/text.html
https://www.informit.com/articles/article.aspx?p=31799&seqNum=2
https://www.rgraph.net/svg/text.html
https://github.com/software-mansion/react-native-svg/issues/972


Red Hot Chilli Peppers Logo in SVG, Animated
https://codepen.io/dudleystorey/pen/grOgLp
https://github.com/kothing/svg-path-editor
https://github.com/TNTx1995/svg_path_editor
https://github.com/Yqnn/svg-path-editor
https://yqnn.github.io/svg-path-editor/
https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/
https://www.sitepoint.com/css-with-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
<svg version="1.1" height="500" width="550">
    <path d="M 361.5 21.375
l -174.906 255.22
l 1.53 1.06
l 31.97 22.314
l 175.062 -255.5
L 361.5 21.374
z
M 451.563 83.595 
c -20.16 29.418 -44.122 23.1 -68.25 8.905
l -48.688 72.875
c 21.278 16.55 36.46 35.645 18.594 61.72
l 42.967 29.468
l 28.907 -42.157
l -14.72 -9.156
c -3.167 1.844 -6.85 2.906 -10.78 2.906
c -11.85 0 -21.47 -9.62 -21.47 -21.47
c 0 -11.847 9.62 -21.436 21.47 -21.436
s 21.437 9.59 21.437 21.438
c 0 0.195 -0.025 0.4 -0.03 0.593
l 15.906 9.907
l 17.938 -26.218
l -37.688 -23.5
l 11.03 -17.72
l 14.94 9.313
l 10.093 -16.188
l 24.25 15.094
l 17.092 -24.94
l -43 -29.436
z
M 146.22 273.624 
c -0.31 0.01 -0.628 0.023 -0.94 0.063
c -0.827 0.104 -1.652 0.284 -2.53 0.562
c -3.51 1.11 -7.4 4.066 -10.125 7.938
c -2.724 3.87 -4.16 8.487 -4 12.125
c 0.16 3.637 1.257 6.338 5.25 9.125
l 76.594 53.468
c 3.283 2.293 5.727 2.35 9.124 1.156
c 3.396 -1.192 7.323 -4.26 10.125 -8.218
c 2.8 -3.96 4.352 -8.66 4.31 -12.188
c -0.04 -3.53 -0.89 -5.787 -4.374 -8.22
L 153.03 275.97
c -2.546 -1.78 -4.657 -2.42 -6.81 -2.345
z
M 89.28 317.78
c -24.354 0.41 -45.504 9.52 -57.655 27.25
c -16.95 24.737 -11.868 59.753 9.625 90.283
c -1.838 4.72 -2.875 9.84 -2.875 15.187
c 0 23.243 19.07 42.313 42.313 42.313
c 8.635 0 16.692 -2.625 23.406 -7.125
c 43.208 18.488 88.07 12.714 108.28 -16.782
c 18.695 -27.28 10.884 -66.912 -16.374 -99.312
l -63.094 -44.03
c -14.016 -5.107 -28.07 -7.7 -41.25 -7.783
c -0.792 -0.004 -1.59 -0.012 -2.375 0
z
M 80.687 426.906
c 13.143 0 23.594 10.45 23.594 23.594
c 0 13.143 -10.45 23.625 -23.593 23.625
c -13.142 0 -23.624 -10.482 -23.624 -23.625
s 10.482 -23.594 23.624 -23.594
z
" stroke="black" stroke-width="1" fill="none"></path>
    </svg>

　　

 

SVG 元素：

元素描述
a 定义超链接
altGlyph 允许对象性文字进行控制，来呈现特殊的字符数据（例如，音乐符号或亚洲的文字）
altGlyphDef 定义一系列象性符号的替换（例如，音乐符号或者亚洲文字）
altGlyphItem 定义一系列候选的象性符号的替换
animate 随时间动态改变属性
animateColor 规定随时间进行的颜色转换
animateMotion 使元素沿着动作路径移动
animateTransform 对元素进行动态的属性转换
circle 定义圆
clipPath  
color-profile 规定颜色配置描述
cursor 定义独立于平台的光标
definition-src 定义单独的字体定义源
defs 被引用元素的容器
desc 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
ellipse 定义椭圆
feBlend SVG 滤镜。使用不同的混合模式把两个对象合成在一起。
feColorMatrix SVG 滤镜。应用matrix转换。
feComponentTransfer SVG 滤镜。执行数据的 component-wise 重映射。
feComposite SVG 滤镜。
feConvolveMatrix SVG 滤镜。
feDiffuseLighting SVG 滤镜。
feDisplacementMap SVG 滤镜。
feDistantLight SVG 滤镜。 Defines a light source
feFlood SVG 滤镜。
feFuncA SVG 滤镜。feComponentTransfer 的子元素。
feFuncB SVG 滤镜。feComponentTransfer 的子元素。
feFuncG SVG 滤镜。feComponentTransfer 的子元素。
feFuncR SVG 滤镜。feComponentTransfer 的子元素。
feGaussianBlur SVG 滤镜。对图像执行高斯模糊。
feImage SVG 滤镜。
feMerge SVG 滤镜。创建累积而上的图像。
feMergeNode SVG 滤镜。feMerge的子元素。
feMorphology SVG 滤镜。 对源图形执行"fattening" 或者 "thinning"。
feOffset SVG 滤镜。相对与图形的当前位置来移动图像。
fePointLight SVG 滤镜。
feSpecularLighting SVG 滤镜。
feSpotLight SVG 滤镜。
feTile SVG 滤镜。
feTurbulence SVG 滤镜。
filter 滤镜效果的容器。
font 定义字体。
font-face 描述某字体的特点。
font-face-format  
font-face-name  
font-face-src  
font-face-uri  
foreignObject  
g 用于把相关元素进行组合的容器元素。
glyph 为给定的象形符号定义图形。
glyphRef 定义要使用的可能的象形符号。
hkern  
image  
line 定义线条。
linearGradient 定义线性渐变。
marker  
mask  
metadata 规定元数据。
missing-glyph  
mpath  
path 定义路径。
pattern  
polygon 定义由一系列连接的直线组成的封闭形状。
polyline 定义一系列连接的直线。
radialGradient 定义放射形的渐变。
rect 定义矩形。
script 脚本容器。（例如ECMAScript）
set 为指定持续时间的属性设置值
stop  
style 可使样式表直接嵌入SVG内容内部。
svg 定义SVG文档片断。
switch  
symbol  
text  
textPath  
title 对 SVG 中的元素的纯文本描述 - 并不作为图形的一部分来显示。用户代理会将其显示为工具提示。
tref  
tspan  
use  
view  
vkern  
posted @   ®Geovin Du Dream Park™  阅读(24)  评论(0)  编辑  收藏  举报
相关博文：
·  SVG: draw text on a image
·  css: SVG and CSS
·  SVG的介绍与简单案例
·  HTML5-和-CSS-响应式-Web-设计-全-
·  【笔记】【SVG】SVG-菜鸟编程-学习笔记
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
历史上的今天：
2015-11-30 HTML5 Audio and JavaScript Control
2011-11-30 CSS DIV Shadow
< 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
点击右上角即可分享
微信分享提示