svg属性介绍

最新推荐文章于 2024-07-31 16:50:09 发布

前端开心果

最新推荐文章于 2024-07-31 16:50:09 发布

阅读量1.2k

点赞数

分类专栏： svg 文章标签： SVG

本文链接：https://blog.csdn.net/qq_38157825/article/details/124385461

版权

svg 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了SVG中的渐变类型，包括线性渐变和径向渐变的创建与应用，以及如何通过指定id属性和在defs元素内定义渐变以实现复用。此外，还探讨了SVG的基本变形操作，如平移、旋转、斜切和缩放，并讲解了剪切和遮罩效果的实现，展示了如何通过clipPath和mask元素来控制元素的显示区域和透明度。最后，提到了透明度属性在填充和描边中的应用。

摘要由CSDN通过智能技术生成

渐变

渐变分线性渐变和径向渐变，必须给渐变内容指定一个id属性，否则文档内的其他元素就不能引用它。为了让渐变能被重复使用，渐变内容需要定义在<defs>标签内部，而不是定义在形状上面。

线性渐变

即沿直线改变颜色，要插入一个线性渐变，在svg内部创建<defs>，并在<defs>内部创建一个<linearGradient>节点

<head>
  <style>
    .stop1 {
      stop-color: rgb(200, 255, 0);
    }
    .stop2 {
      stop-color: aquamarine;
    }
    .stop3 {
      stop-color: rgb(14, 231, 212);
    }
    #rect1 {
      fill: url(#lGradient);
    }
  </style>
</head>
  <svg width="200" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="lGradient">
        <stop class="stop1" offset="0%" />
        <stop class="stop2" offset="50%" />
        <Stop class="stop3" oddset="100%" />
      </linearGradient>
    </defs>
    <rect x="10" y="10" width="30" height="30" id="rect1" />
  </svg>
</body>
</html>

<svg width="200" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="lGradient2" x1="0" x2="0" y1="0" y2="1">
            <stop stop-color="red" offset="0%" />
            <stop stop-color="black" stop-opacity="0" offset="50%" />
            <Stop stop-color="blue" oddset="100%" />
        </linearGradient>
    </defs>
    <rect x="10" y="10" width="30" height="30" fill="url(#lGradient2)" />
    <rect x="40" y="40" width="30" height="30" fill="orange" stroke="url(#lGradient2)" />
</svg>

使用渐变时，需要在一个对象的属性fill或stroke中引用。

渐变的方向可以通过两个点来控制(x1, y1)和(x2, y2)，定义了渐变路线走向，默认是水平方向，改变这些属性可以旋转该方向。

<linearGradient id="lGradient2" x1="0" x2="1" y1="0" y2="1">

径向渐变

它是从一个点开始发散绘制渐变。创建径向渐变需要在文档的<defs>中添加一个<radialGradient>元素

<svg width="200" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="radialGradient">
            <stop stop-color="pink" offset="0" />
            <stop stop-color="red" offset="1" />
        </radialGradient>
    </defs>
    <rect x="40" y="40" width="30" height="30" fill="url(#radialGradient)" />
</svg>

<svg width="200" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="radialGradient" cx="0.25" cy="0.25" r="0.5" fx="0.1" fy="0.1">
            <stop stop-color="pink" offset="0" />
            <stop stop-color="red" offset="1" />
        </radialGradient>
    </defs>
    <rect x="40" y="40" width="30" height="30" fill="url(#radialGradient)" />
</svg>

径向渐变也是通过两个点来定义其边缘位置，两点中的第一个点定义了渐变结束所围绕的圆环，它需要一个中心点，由cx、cy属性和半径r来定义，通过设置这些点我们可以移动渐变范围并改变它的大小。

第二个点被称为焦点，由fx和fy属性定义。第一个点描述了渐变边缘位置，第二个点焦点则描述了渐变的中心。

如果焦点被移到圆圈外面，渐变将不会显示。如果没有设置焦点，默认中心点位置。

基础变形

下面的变形用元素都transform属性总结，变形可以连缀，只要把他们连接起来就行，用空格隔开。

平移

translate()

<rect x="0" y="0" width="30" height="30" transform="translate(30, 40)"></rect>

矩形将移动到点(30,40)，而不是(0,0)。如果translate(30)没有自动第二个值，默认被赋值0.

旋转

rotate()

<rect x="50" y="50" width="30" height="30" transform="rotate(45)"></rect>

斜切

利用矩形制作斜菱形，可以使用skewX()和skewY()变形，每个需要一个角度来确定元素斜切到多远

<rect x="50" y="50" width="30" height="30" transform="skewX(45)"></rect>

缩放

scale()变形改变了元素都尺寸，需要两个参数，0.5表示收缩到50%，如果第二个数字被忽略了，默认等于第一个值

<rect x="50" y="50" width="30" height="30" transform="scale(0.5)"></rect>

剪切和遮罩

剪切

在一个圆形的基础上创建半圆形

  <svg width="200" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <clipPath id="cut-off">
        <rect x="0" y="0" width="200" height="100"></rect>
      </clipPath>
    </defs>
    <circle cx="100" cy="100" r="100" clip-path="url(#cut-off)"></circle>
  </svg>

在点(100,100)创建一个半径为100的圆，属性clip-path引用了一个带单个rect元素的clipPath元素，它内部的这个矩形将画布的上半部分给显示了出来。这个rect元素不会被绘制，它的像素数据只是用来确定：圆形的哪些像素需要显示出来，因为矩形只覆盖了圆形的上半部分，所以下半部分消失了。

注意：clipPath元素经常放在一个defs元素内。

遮罩

遮罩表现的效果如渐变，如果想让一个元素淡出，可以利用遮罩效果实现。

  <svg width="200" height="500" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="Gradient">
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="1" stop-color="white" stop-opacity="1" />
      </linearGradient>
      <mask id="Mask">
        <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"></rect>
      </mask>
    </defs>
    <rect x="0" y="0" width="200" height="200" fill="red"></rect>
    <rect x="0" y="0" width="200" height="200" fill="blue" mask="url(#Mask)"></rect>
  </svg>

有一个红色填充的矩形在底层，一个蓝色填充的矩形在上层。后者有一个mask属性指向一个mask元素。mask元素的内容是一个单一的rect元素，它填充了一个透明到白色的渐变。作为蓝色矩形继承mark内容的alpha值（透明度）的结果，适应可以看到一个从红色到蓝色渐变的输出。

透明度

opacity设置透明度，fill-opacity和stroke-opacity分别表示填充和描边的不透明度。

注意：描边将绘制在填充上面，如果你在一个元素上设置了描边透明度，但它同时设有填充，则描边的一半应用填充色，另一半应用背景色。

  <svg width="200" height="500" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="200" height="200" fill="green"></rect>
    <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red"></circle>
  </svg>