代码库
  • 首页
  • html模板
  • Jquery插件
  • 代码文章
  • 百宝箱
  • 网站导航
  • 编程代码
    • PHP
    • Jquery
    • DivCss
    • Mysql
    • linux
  • 程序代码
    • 织梦Cms
  • php
  • jquery
  • divcss
  • 网站建设500起 APP小程序独开
  • HTML模板全站下载388元
  • COMODO通配符SSL证书330元
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 广告位招租:515856299
  • 领取上云大礼包单笔最高立减1500元
  • 服务器0元试用,首购低至0.9元/月起

html网页引入svg

分类:DivCss人气:1820
1. 直接插入页面

在html页面,可以直接使用svg标签。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <!-- 一个svg图片 -->
        <svg width="200" height="150" style="border: 1px solid steelblue">
            <!-- 里面有一个矩形 -->
            <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
        </svg>
    </body>
</html>
2. img标签引入

除了在网页里直接写svg标签,也可以通过img引入,就像引入jpeg、png图片一样。

1)新建svg图片

那么我们就要先新建一个svg图片文件,我们把上面直接写在网页里的svg拿来用:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="150">
    <rect x="10" y="10" width="100" height="60" fill="skyblue"></rect>
</svg>

这边内容有两点不一样:

1. 需要声明命名空间 xmlns 这个属性,命名空间可以本文尾部列出的参考资料。

2. 移除了原先写在 svg 标签上的样式,style="border: 1px solid steelblue"。

把内容保存到test.svg文件,这个就是一张图片文件了,可以尝试在浏览器打开看看。

2)使用img标签引入

假设test.svg和网页文件在同一个目录下:

<img src="test.svg" style="border: 1px solid steelblue" />

和引入jpeg、png类似,直接src属性设置图片路径即可,另外我们把原先在svg的样式移到了img标签这边。

3. css引入

css引入就是把图片当成背景图引入

<style type="text/css">
    .svg {
        width: 200px;
        height: 150px;
        border: 1px solid steelblue;
        background-image: url(test.svg); // 当成背景引入
    }
</style>
<div class="svg"></div>

和img引入类似,需要一个svg文件,然后用属性data引入:

<object data="test.svg" style="border: 1px solid steelblue"></object>
标签:htmlsvg
PREVIOUS:js点击移动端屏幕闪烁
NEXT:获取窗口顶部距离
  • 360度旋转
  • CSS3效果
  • css3
  • 自动换行
  • 图片闪光划过
  • HTML
  • 移动
  • 动画特效
  • 清除浮动
  • 物流快递
  • 点击爆炸
  • 选项卡
  • 透明度
  • 省略号
  • 网页
  • 特效
  • 图片放大
  • loading
  • 放大
  • 小技巧
  • 更新
  • 纯css3
  • 特效代码
  • 排行榜
  • 跟踪状态
  • 兼容IE6
  • 边框
  • TAB
  • 加载
  • img图片最大宽
  • CSS
  • 旋转放大
  • 边框阴影
  • css3特效
  • svg
最新模板
  • 程序员培训公司网站模板

    这是一套程序员培训公司网站模板是一款适合程序开发公司网站模板下载

  • 宽屏公司着陆页网站模板

    这是一套宽屏公司着陆页网站模板是一款宽屏大气单页网站模板下载

  • 运输行业公司网站模板

    这是一套运输行业公司网站模板是一款大型货物海外集装箱公司网站模板下载

  • APP小程序开发者网站模板

    这是一套APP小程序开发者网站模板是一款微信小程序开发者企业官网网站模板下载

  • 紫色渐变展览活动单页模板

    这是一套紫色渐变展览活动单页模板是一款bootstrap单页网站模板下载

热门推荐
  • 1absolute定位css元素居中的两种方法
  • 2html网页引入svg
  • 3如何网页中引用字体文件
  • 4CSS显示不同颜色数字的排行榜
  • 5CSS英文字符自动换行
  • 6CSS图片透明度
  • 7css实现div边框阴影
  • 8css设置div边框
  • 9纯css3实现加载等待loading动画特效代码
  • 10纯css3实现的物流快递跟踪状态更新css3特效
  • 11CSS清除浮动方法汇总
  • 12CSS3制作漂亮TAB选项卡
  • 13css3图片一道闪光划过特效代码
  • 14css3点击爆炸下落的特效代码
  • 15HTML+css图片放大特效代码
百宝箱
  • CSS压缩格式化

    CSS压缩

  • html格式化

    html格式化

  • 繁体字转换器

    繁体字转换

  • JSON检验

    JSON检验

  • MD5加密

    MD5加密

  • css3动画

    css3动画

© 2016-2021 代码库关于我们网站导航网站地图皖ICP备14004357号
代码库