SVG实例

最新推荐文章于 2022-01-06 21:04:47 发布

牧马少女

最新推荐文章于 2022-01-06 21:04:47 发布

阅读量872

点赞数

分类专栏：前端技术方案文章标签： svg

本文链接：https://blog.csdn.net/qq_36069339/article/details/89678657

版权

前端技术方案专栏收录该内容

54 篇文章 1 订阅

订阅专栏

SVG元素

SVG各种类型的例子

Demo1:渐变文字

代码：

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Applying a gradient background to text in SVG</title>
 </head>
 <body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewbox="0 0 1200 400"> 
        <defs>
            <linearGradient id = "filler" x = "0%" y = "100%">
                <stop stop-color = "olivedrab" offset = "0%"/>
                <stop stop-color = "peru" offset = "20%"/>
                <stop stop-color = "goldenrod" offset = "40%"/>
                <stop stop-color = "firebrick" offset = "60%"/>
                <stop stop-color = "thistle" offset = "80%"/>
                <stop stop-color = "sandybrown" offset = "100%"/>
            </linearGradient>
        </defs>
        <text x="0" y="70%" font-size="180" fill="url(#filler)">S.QW.YA</text>
    </svg>
 </body>
</html>

效果：

解释：

xmlns="http://www.w3.org/2000/svg" 是XML命名空间，在SVG标签中定义。

version="1.1" 是SVG命名空间的版本。

viewBox 属性允许指定一个给定的一组图形伸展以适应特定的容器元素。

<svg>

<defs> 引用的元素容器

<linearGradient>

<stop>

<text>

demo2：折线

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>My svg demo</title>
 </head>
 <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
        </svg>
 </body>
</html>

效果：

牧马少女

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
SVG实例

SVG元素SVG各种类型的例子Demo1:渐变文字代码：<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="A...
复制链接

扫一扫

专栏目录