Svg

最新推荐文章于 2024-03-11 10:52:42 发布
最新推荐文章于 2024-03-11 10:52:42 发布
阅读量197 收藏
点赞数
文章标签： css svg css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45541665/article/details/115417951
版权

简单介绍

  • SVG 是一种使用 XML 描述 2D 图形的语言。
  • SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
  • 在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

预定义的形状元素

<body>

  <div class="box">
    <!-- svg 不加 viewBox 属性，那么下面 位置、长度数值 的单位 就是 px -->
    <!-- 以下位置的基准点 是 svg元素的左上角，可以手动修改 -->
    <svg width='500' height='800' style="background: white;">

      <!-- 四边形 fill：背景填充， stroke：描边 -->
      <rect x='10' y='10' width='100' height='30' 
        stroke='green' stroke-opacity='0.4' stroke-width='5' stroke-dasharray='2'
        fill='red' />
  
      <!-- 圆形 -->
      <circle cx='100' cy='100' r='50' />

      <!-- 椭圆形 -->
      <ellipse cx='100' cy='200' rx='50' ry='25' />

      <!-- 直线 -->
      <line x1='10' y1='250' x2='110' y2='250' stroke='red' />

      <!-- 多边形，  points='x,y x2,y2 ...'-->
      <polygon points='10,300 100,330 200,400 50,500' />

      <!-- 折线 -->
      <polyline points='10,400 100,430 200,500 50,600' stroke='red' fill='transparent' />

      <!-- 文字 -->
      <text x='20' y='700' style="font-size: 25px;"> see you</text>

      <!-- g元素是 组元素， 为其子元素 统一在 g元素上 设置 填充色 和 描边 等性状配置 -->
      <g stroke="black" stroke-width="3" fill="skyblue" >
        <circle cx="250" cy="100" r="10" />
        <circle cx="300" cy="50" r="10" />
        <circle cx="350" cy="100" r="10" />
      </g>

    </svg>
  </div>

</body>

路径标签 path

path元素可以用于定义路径，元素中有一个 d 属性，这个 d 属性是一系列命令的集合。
一系列命令如下：

命令参数作用描述
Mx y移动画笔到 参数坐标，即起始点
Lx y绘制一条到 给定坐标的线，可提供多组坐标绘制折线
Hy绘制平行线
Vx绘制垂直线
Arx ry x-axis-rotation large-arc-flag sweep-flag x y绘制当前点到（x,y）的椭圆弧，椭圆弧的 x，y轴半径分别为 rx,ry。椭圆相对于 x 轴旋转 x-axis-rotation 度。large-arc-flag 等于0表示弧线小于180度，等于1表示弧线大于180度。sweep-flag 等于0 表示弧线逆时针旋转，等于1表示弧线顺时针选装
Qx y x1 y1绘制一条从当前点到（x,y），控制点为（x1,y1）的二次贝塞尔曲线
Tx y绘制一条从当前点到（x,y）的二次贝塞尔曲线
Sx y x1 y1绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为新端点的控制点
Cx yx1 y1 x2 y2绘制一条从当前点到（x,y）的三次贝塞尔曲线，（x1,y1）为曲线的开始控制点，（x2,y2）为曲线的终点控制点
Z闭合路径

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

栗子

  • 使用路径命令绘制一个矩形：
<svg width='450' height='600'>
  		<path d="M50 50 L200 50 L200 150 L50 150 Z" fill="red"  />
 </svg>

说明：
其中 M 命令指定了开始点的位置，即左上角 (50,50)，L 命令可以用于绘制一条直线段，这个直线段从当前位置移到指定位置。上述三个 L 位置分别为右上角 (200,50)、右下角 (200,150)、左下角(50,150)。Z 命令为闭合路径命令。

  • 绘制一段弧线：
<svg width='450' height='600'>
  		<path d="M50,40 A30 50 0 0 1 100,110" fill="transparent" stroke="green"/>
 </svg>

说明：
椭圆弧指令(A)最复杂的，有 7个参数
这段弧线的起点为 (50,40)，
第一个参数： 圆弧x轴方向上的 半径
第二个参数： 圆弧y轴方向上的 半径
第三个参数： 椭圆相对于坐标系的旋转角度，角度数而非弧度数
第四个参数： 绘制大弧(1)还是小弧(0)
第五个参数：顺时针(1)还是逆时针(0)方向绘制
第六、七个参数： 表示终点为(100, 110)

选择器 控制 svg相关标签

<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>wtt</title>
  <style>
    .box {
      margin-top: 10px;
      border: 10px solid red;
      box-sizing: border-box;
      width: 555px;
      height: 800px;
    }

    .box svg {
      margin-top: 50px;
      border: 1px solid black;
      box-shadow: 2px 2px 10px 10px black;
      background: blanchedalmond;
    }

    .wtt {
      /* 注释的属性 都是 在 svg标签上 使用无效 的 属性 */
      /* 
      border: 5px solid black;
      box-shadow: 1px 1px 10px 10px red;
      margin-top: 200px; 
      */

      x: 120;
      y: 200;
      width: 200px;
      height: 200px;
      fill: red;
      stroke: black;
      stroke-width: 5;
      animation: wtt 2s ease 0s infinite alternate;
    }

    @keyframes wtt {
      0% {
        stroke-width: 5;
      }
      50% {
        stroke-width: 15;
      }
      100% {
        stroke-width: 25;
      }
    }
  </style>

</head>

<body>
  <div class="box">
    <svg width='450' height='600'>
      <rect class="wtt" />
    </svg>
  </div>

</body>

</html>

填充色

线性渐变 (linearGradient)

    <svg width='500' height='800' style="background: white;">

      <!-- 把所有需要 再次使用的 引用元素 定义在 defs元素里面 -->
      <defs>
        <!-- 水平方向渐变 -->
        <!--linearGradient： 定义线性渐变的 引用元素 -->
        <linearGradient id="wtt" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" style="stop-color:pink;stop-opacity:1" />
          <stop offset="50%" style="stop-color:skyblue;stop-opacity:1" />
          <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
        
        <!-- 竖直方向渐变 -->
        <linearGradient id="who" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" style="stop-color:pink;stop-opacity:1" />
          <stop offset="50%" style="stop-color:skyblue;stop-opacity:1" />
          <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
      </defs>
      
      <!-- 通过url 获取 指定id（#wtt，别忘了#号） 的 引用元素 -->
      <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#wtt)" />

    </svg>

放射渐变 (radialGradient)

  <defs>
    <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0" />
      <stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
    </radialGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />

滤镜

  <svg width='450' height='600'>
      <filter id="f1" x="0" y="0">
        <feGaussianBlur in="SourceGraphic" stdDeviation="10" />
      </filter>
    </defs>
    <rect x='10' y='10' width="90" height="90" fill="black" filter="url(#f1)" />
  </svg>

影子效果

    <svg width='450' height='600'>
      <defs>
        <filter id="f1" x="0" y="0" width="200%" height="200%">
          <!-- 影子偏移量 -->
          <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
          <!-- 影子模糊度 -->
          <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
          <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
        </filter>
      </defs>
      <rect 
        x='100' y='100'
        width="90" height="90" 
        stroke="green" stroke-width="3" 
        fill="yellow" filter="url(#f1)" 
      />

    </svg>
码刀攻城
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在SVG中设置转换原点
stefanie_sun723的博客
06-06 417
转换svg的默认原点
svg 画实心圆
10-16
做项目时，遇到动态修改某点的颜色，整理了个简单的，只需要四行HTML代码就能输出需要的圆点。利用svg简单实现在页面输出圆，可控制圆的填充颜色，大小。
SVG图打点
weixin_42666124的博客
06-15 1213
在平时的工作中 ，我们可能会遇到需要在SVG图上或是某个DOM上打点的需求，下面实现了在SVG图上打点的功能，如果需要在其他DOM上打点也可以参照此方法。 说一下思路： 一、如何在SVG图片里再插入图片 要想在SVG图上打点，首先想着怎么在SVG图片里插入图片，创建一个SVG的image标签 const svgImgDom = document.createElementNS( 'http://www.w3.org/2000/svg', 'image', ); 然后引入图片，设置
SVG画圆
qq_26239917的博客
04-04 798
<path d=" M250 250 m-200 0 a200 200 0 1 0 400 0 a200 200 0 1 0 -400 0 " style="stroke:#000000;fill:#f0f0f5"></path> 语法解释： M250 250 将画笔放到250 250位置 m-200 0 将画笔放到x向负方向...
svg标记marker，给端点加上箭头，或者小圆点，菱形等标记应该怎么做呢？
qq_21280835的博客
03-11 974
如果想给一条路径的两个端点加上箭头（三角形），或者小圆点，菱形等标记应该怎么做呢？ 标记是markerSVG中一个比较重要的概念，它能贴附于、、、元素上。最常用的应用就是给线段添加箭头。标记写在 defs中可用于定义可重复利用的图形元素。
h5学习笔记之svg绘图
qq_39773416的博客
09-08 921
一、svg的引入方式 如代码： <div id="box"> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" > //这里是引入svg代码 <circle cx="250" cy="250" r="100" fill="red"&gt...
svg
03-07
SVG，全称Scalable Vector Graphics，是一种基于XML（Extensible Markup Language）的矢量图形格式。它被广泛用于Web开发，因为它可以无损地缩放图像，无论放大多少倍，图像的质量都不会降低，这对于创建高质量的...
glide加载和下载svg矢量图片
04-02
SVG（Scalable Vector Graphics）是一种矢量图格式，与传统的位图图像不同，SVG图像可以无损缩放，不会因为放大而出现像素化。在Android应用中，使用SVG可以提供高质量的图标和图形，尤其适用于多种屏幕尺寸和分辨率...
delphi SVG组件库
06-17
**SVG (Scalable Vector Graphics)** 是一种基于XML的矢量图像格式，它允许开发者创建可缩放的图形，无论放大或缩小，图像质量始终保持清晰。SVG在网页设计、应用程序开发以及图形用户界面中广泛应用，因为它们提供...
dxf转svg,svg转png
11-11
标题提到的“dxf转svg,svg转png”涉及两种不同的转换过程，都是图形文件格式之间的转换。DXF（Drawing Exchange Format）是AutoCAD用于二维绘图的数据交换格式，SVG（Scalable Vector Graphics）是一种基于XML的矢量...
SVG灯泡发光特效特效代码
03-20
SVG（Scalable Vector Graphics）是一种基于XML的矢量图形语言，用于在Web上创建和显示高质量的图形。它允许开发者以数学方式定义图形，因此无论放大多少倍，图像都不会失真。SVG图像可通过文本编辑器创建，并可以被...
svg html转换器,SVG基础 | SVG坐标系统和图形转换
weixin_42412939的博客
05-31 514
SVG坐标系统坐标系统一个普通的笛卡尔坐标系统的坐标原点(0,0)位于左下角位置，X轴方向上向右是正值，向左是负值。Y轴方向上向上是正值，向下是负值。如下图所示：而SVG的坐标系统坐标原点位于左上角，X轴和笛卡尔坐标系的X轴相同，但是Y轴则刚好相反，如果SVG中点或图形数值增加时往下增长，而不是往上。如下图所示：SVG坐标系统的单位你可以指定在SVG坐标系统值1个单位代表什么。如果你没有明确的指定...
如何使用CSS来修改SVG原点和制作SVG动画
Just Code
07-22 1037
SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。   SVG元素可以像HTML元素一样，使用CSS keyframes和animation属性或者CSS transitions来制作各种动画效果。 大多数情况下，一个复杂的动画效果需要组合多种变换效果：旋转、倾斜、缩放以及他们的转换和过渡效果。多...
学习SVG（二）坐标系统
小小的前端
07-21 1145
SVG是用于绘图的，那么它和其他绘图技术一样都是有网格坐标系统。以左上角为坐标系的原点(0,0)。X轴的正方向向右，Y轴的正方向向下。坐标轴以像数为单位。
html使用canvas，svg绘制方格，并在方格上放圆点
qq_38360823的博客
07-14 513
【代码】html使用canvas，svg绘制方格，并在方格上放圆点。
svg标记marker
atu1111的博客
08-17 2594
svg值marker refX=“2” refY=“6” orient="auto"是指箭头方向随着路径的方向而自动变化 orient的值也可以用户自己定义 orient="-45"
02——svg绘制基本图形，了解常用的属性
weixin_42289080的博客
11-23 2459
多个坐标点的位置集合，傻瓜式写坐标就行，以此类推。重要的是，在svg坐标系中，x轴正方向。这个定义就很简单了，数学上两个点的坐标。然后一起学习下各个图形的属性用法。：与多线段类似，区别是。连起来，形成封闭图形。
SVG坐标系统
Meskjei的博客
06-24 1195
文章目录世界坐标系统最初坐标系统用户坐标系统转换坐标系统SVG transfromSVG transfrom与CSS transform相似之处不同之处SVG transform translate位移语法参数说明特别说明 世界坐标系统 即左上角为坐标原点，从坐标原点出发从左到右为x轴正方向，从上到下为y轴正方向。 最初坐标系统 即以SVG画布的左上角为坐标原点。 用户坐标系统 对于蓝色方块...
SVG制作内阴影
nathercloud的博客
04-16 4667
1、在css中可以通过 box-shadow: inset 0 0 8px #f00 的方式去设置内阴影 2、在svg中应该怎么实现呢？这就不得不说svg中的滤镜功能，这里只谈内阴影的制作，至于其他的滤镜请自行百度搜索学习。 下面直接看代码： <svg> <filter id="innershadow" x0="-50%" y0="-50%" width="20...
Typing SVG
最新发布
06-17
Typing SVG, 或者称为 Scalable Vector Graphics, 是一种基于 XML 的矢量图形格式，用于在网页和应用程序中展示清晰、可缩放的图像。SVG 图像由一系列指令组成，这些指令定义了图形的几何形状、颜色、路径等，而非像素数据，这意味着它们不会因为缩放而失去清晰度。 SVG的主要特点包括： 1. **矢量图**：SVG图像是分辨率独立的，可以在不同尺寸和分辨率的屏幕上保持清晰。 2. **可交互性**：SVG支持事件处理，可以通过JavaScript进行动态修改或动画效果。 3. **可编辑性**：由于是XML，SVG文件可以用文本编辑器直接查看和修改。 4. **轻量级**：对于简单的图形，SVG比位图图片（如JPEG或PNG）加载速度更快，占用存储空间更小。 5. **跨平台支持**：SVG在各种浏览器、操作系统和设备上都有良好的兼容性。 相关问题： 1. SVG与位图格式的区别是什么？ 2. 如何在HTML中嵌入SVG图像？ 3. 在响应式设计中，SVG有哪些优势？

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值