zoukankan      html  css  js  c++  java
  • HTML5学习笔记3 内联SVG

    HTML5支持内联SVG

    下面来介绍一下什么是SVG

    SVG可缩放矢量图形

    可缩放矢量是基于可扩展标记语言(标准通用语言的子集),用于描述二维矢量图形的一种图形格式。它由万维网联盟制定,是一个开放标准。

    使用xml格式定义图形

    在放大或缩小或改变尺寸的情况下其图形质量不会有损失

    SVG优势

    与其他的图像格式相比(比如jpeg和gif),使用svg优势在于

    svg图像可通过文本编辑器来编辑来创建和修改

    svg图像可被搜索,索引,脚本化或压缩

    svg是可伸缩的

    svg图像可在任何的分辨率下被高质量地打印。

    svg图像在无损耗的情况被放大。

    在html5中,您能够将svg元素直接嵌入html页面中:

    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
       <polygon points="100,10 40,180 190,60 10,60 160,180"
       style="fill:lime;stroke:purple;stroke-5;fill-rule:evenodd;">
     </svg>

    记得曾经在给原来公司做项目的时候,用的是svg展示变电站、变压器、高配、配变、馈线、开关等元器件,三两个220KV的变电站组成一个环网单元,用一个svg

    展示,一个svg文件差不多就30多Mb,在ie7,ie8还不支持的情况,借助abobe公司的插件,展示svg.

    在网页中模拟鼠标左键操作,利用单击操作,修改svg图像 xml节点的值,然后刷新页面重新渲染图像。

  • 相关阅读:
    [Writeup]奇怪的单点音
    [Writeup]百度一下,你就知道
    C语言学习一个月后感想
    小黄衫获得感想及经验总结
    Ubuntu初始化配置
    在Ubuntu 18.04中安装 docker compose
    Docker安装 配置
    Laravel Heroku评价
    Laravel Deploy to Heroku
    Laravel Nuxt auth refresh
  • 原文地址:https://www.cnblogs.com/langhua/p/4548037.html
Copyright © 2011-2022 走看看