CSS3中SVG简单应用

最新推荐文章于 2024-09-13 09:32:15 发布

一点点墨

最新推荐文章于 2024-09-13 09:32:15 发布

阅读量8.2k

点赞数 2

分类专栏： css3 html5 文章标签： css3 svg

本文链接：https://blog.csdn.net/SmileRM/article/details/78876154

版权

html5 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

css3

1 篇文章 0 订阅

订阅专栏

这是火焰遮罩效果图，顺着案例简单讲一下SVG的简单应用

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>火焰背景遮罩字</title>
    <link rel="stylesheet" href="css/fire.css">
</head>
<body>
    <svg viewBox="0 0 1000 300">
        <pattern id="p-fire"
                 viewBox="30 100 186 200"
                 patternUnits="userSpaceOnUse"
                 width="216" height="200"
                 x="-70" y="35">
        <image xlink:href="img/fire.gif" width="256" height="300"></image>
        </pattern>
        <text text-anchor="middle"
              x="50%"
              y="50%"
              dy=".35em"
              class="text"
        >
            hello
        </text>
    </svg>
   <input id="mytext" type="text"/>

</body>
</html>

CSS部分（fire.css）：

.text{
    fill:url("#p-fire"); /*fill填满，铺满*/
    stroke:#330000;  /*文本轮廓的线条颜色*/
    stroke-width:8; /*文本轮廓的厚度，线条宽度*/
    stroke-opacity: .5;  /*轮廓透明度*/
    font-size:16em;
    font-weight:600;
}

/*其他的样式*/
html,body{
   height:100%;
}
body{
    background:#000;
    text-transform: uppercase;
    margin:0;
}
svg{
    position:absolute;
    width:100%;
    height:90%;
    margin:0;
}

使用的图片（fire.gif）:
这里写图片描述

首先讲一下我自己理解的原理步骤：

1、SVG矢量图形,里面包括可见视图pattern（包含火焰图片image）、文本text

2、导入图片xlink，设置宽高；此时看不见图片（靠想象）

3、用viewBox=”0 0 100 100”,表示坐标为(0,0)的点出发，宽高为100的框框，然后将该框框内锁定的元素（就是刚才的火焰）放大至整个pattern；设置pattern宽高，x，y是设置位置

4、在css中设置样式，用pattern铺满文字；(fill)

5、然后在SVG中设置框框选中整个字，放大至SVG大小；(viewBox)

现在详细讲一下各个标签的作用以及标签属性

SVG是可缩放矢量图形

1、svg标签：创建一个svg文档片段

viewBox=“x,y,width,height” 坐标(x,y)作为起始点圈出一个框框，然后将框框，连同框框中的元素一起放大至整个svg大小；width为正数，表示起始点往右的宽度；height为正，则往下；

2、pattern标签：定义坐标，你想要的视图显示和视图的大小,然后添加到你的模式形状；

id=”用于引用这个模式的唯一ID” 必需的。

viewBox=”x,y.width,height” 与上面相同

patternUnits=”userSpaceOnUse’或’objectBoundingBox”。
第二个值X，Y，width，height，一个会使用模式对象的边框的小部分，单位（％）。”

patternContentUnits=“‘userSpaceOnUse’或 ‘objectBoundingBox’”
patternTransform=”允许整个表达式进行转换”

width=”模式平铺的宽度（默认为100％）”
height=”模式平铺的高度（默认为100％）”

x=”模式的偏移量，来自左上角（默认为0）” //用于定位该模式
y=”模式的偏移量，来自左上角（默认为0）”

xlink:href=”另一种模式，其属性值是默认值以及任何子类可以继承。递归”