zoukankan      html  css  js  c++  java
  • 一篇文章带你了解SVG 转换知识

    SVG 转换在SVG图像中创建的形状。例如,移动,缩放和旋转形状。这是显示垂直或对角线文本的便捷方法。

    一、转换简单示例

    例:

    <svg xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink">
    
       <rect x="50" y="50" height="110" width="110"
             style="stroke:#ff0000; fill: #ccccff" transform="translate(30) rotate(45 50 50)">
       </rect>
       <text x="70" y="100" transform="translate(30) rotate(45 50 50)"
       >nhooo.com</text>
    </svg>
    

    运行效果:

    注:

    元素的transform 和 的transform属性。

    该属性指定要应用于形状的变换。在此示例中,应用了平移和旋转。两者都将在本文后面解释。

    二、哪些元素可以转换?

    可以将变换应用于所有SVG形状。还可以将变换应用于 元素,从而一次性有效地变换整个元素组。也可以变换渐变和填充图案。

    三、转换函数

    转换函数不会自行转换SVG形状,而是会转换该形状的基础坐标系。因此,即使宽度以倍数显示,宽度20乘以2的形状在逻辑上仍具有20的宽度。

    1. 移动 translate()

    translate()函数移动形状。将x 和 y 值传递给translate()的函数。

    translate(50,25)
    

    将形状沿x轴移动50个单位,并沿y轴移动25个单位。显示了两个位置相等且大小相等的形状,有无平移。

    例:

    <svg width="500" height="150">
    <rect x="20" y="20" width="50" height="50" style="fill: #cc3333" />
    <rect x="20" y="20" width="50" height="50" style="fill: #3333cc" transform="translate(75,25)">
    </rect>
    </svg>
    

    运行效果:

    与第一个(红色)形状相比,第二个(蓝色)形状沿x轴移动75个单位,沿y轴移动25个单位。

    2. 旋转 rotate()

    rotate()函数围绕点0,0旋转形状。

    显示一个矩形(轮廓)和旋转15度后的相等矩形(实心)。

    <svg width="500" height="150">
    <rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;"></rect>
    
    <rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)"></rect>
    </svg>
    

    运行效果:

    如果要绕除0,0以外的其他点旋转,则将该点的x和y坐标传递给transform函数。

    显示了一个非旋转的矩形(轮廓)和一个相等的矩形(实心)围绕其中心旋转15度。

    例:

    <svg width="500" height="150">
    <rect x="20" y="20" width="40" height="40"
         style="stroke: #3333cc; fill:none;"
          ></rect>
    
    <rect x="20" y="20" width="40" height="40"
         style="fill: #3333cc"
         transform="rotate(15, 40, 40)"
          ></rect>
    </svg>
    

    运行效果:

    所有旋转都是顺时针旋转,其度数从0到360。如果要逆时针旋转,请将负的度数传递给rotate()函数。

    3. 缩放 scale()

    3.1 scale()函数简介

    scale()函数按比例放大或缩小形状。scale()函数可缩放形状尺寸及其位置坐标。因此,以20乘以2的比例缩放的宽度为20且高度为30的矩形位于20,20处,其宽度为40且高度为60。

    scale()函数还可以缩放形状的笔触宽度。

    3.2 案例

    显示了一个位于10,0处,宽度为20且高度为20的矩形(蓝色),以及一个等比例的矩形(黑色),其缩放比例为2。

    <svg width="500" height="150">
    <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect>
    
    <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2)"></rect>
    </svg>
    

    运行效果:

    注意

    矩形的位置和大小是如何缩放的。

    可以在x轴和y轴上按其他因子缩放形状。为此,可以向scale()函数提供x-scale和y-scale参数。

    如下所示:

    scale(2,3);
    

    将沿x轴将形状缩放2倍,沿y轴将形状缩放3倍。

    例:

    <svg width="500" height="150">
    <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;"></rect>
    
    <rect x="10" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="scale(2,3)"></rect>
    </svg>
    

    运行效果:

    注意:

    缩放后的矩形(黑色)的笔划宽度也是如何缩放的,并且在x轴和y轴上的缩放比例不同。

    4. 偏斜 skew()

    skewX()和skewY()函数偏斜x轴和y轴。实际上,这些函数会根据以度为单位指定的某个角度来倾斜给定的轴。

    显示具有不同skewX()值的矩形的一些示例。

    <svg width="500" height="150">
          <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />
    
          <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(10)" />
          <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(45)" />
          <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewX(60)" />
        </svg>
    

    运行效果:

    skewX()函数使垂直线看起来像是按给定角度旋转了。

    因此,skewY()函数使水平线看起来像是旋转了给定角度。

    例:

    <svg width="500" height="150">
          <rect x="10" y="10" width="20" height="30" style="stroke: #3333cc; fill:none;" />
    
          <rect x="50" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(60)" />
          <rect x="100" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(45)" />
          <rect x="150" y="10" width="20" height="30" style="stroke: #000000; fill:none;" transform="skewY(10)" />
    </svg>
    

    四、总结

    本文基于HTML基础,介绍了图像的转换。详细的介绍了如何运用转换函数,进行图像移动、缩放、转动、拉长或拉伸等一系列操作。通过案例的分析,丰富的效果图,能够让读者更好的理解。

    希望能够帮助你更好的理解SVG中图像转换。

    想学习更多前端、Python爬虫、大数据等计算机知识,请前往:http://pdcfighting.com/

  • 相关阅读:
    &【12】Python 函数
    &【11】Python 流程控制
    &【09】Python 数据类型之dictionary
    &【07】Python 数据类型之元组
    &【08】Python 数据类型之set
    &【06】Python 数据类型之list
    &【05】Python 彻底搞懂分片操作
    &【04】Python 数据结构之序列
    SpringBoot-HelloWorld(三)
    SpringBoot-了解微服务(二)
  • 原文地址:https://www.cnblogs.com/dcpeng/p/14213271.html
Copyright © 2011-2022 走看看