svg 修改画布大小

2,339 阅读1分钟

问题:

项目中需要替换svg图片,替换之后,图片不能完成占满

解决:

svg是什么
-   SVG 是使用 XML 来描述二维图形和绘图程序的语言。
-   SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
-   SVG 用来定义用于网络的基于矢量的图形
-   SVG 使用 XML 格式定义图形
-   SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
-   SVG 是万维网联盟的标准
-   SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体

代码示例:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64" height="64" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
    <g id="图层_31" transform="translate(6.000000, 2.000000)scale(1.088)">
      <rect fill="#ffffff" x="0.6" y="0.6" width="58.8" height="58.8"></rect> 
      <path fill="#d42d6b" d="M0.6,14.8 L0.6,46.9 C5.9,45.5 12.2,44.6 18.9,43.9 C14.1,31.9 8,21.5 0.6,14.8 Z"></path>
      <path fill="#d42d6b" d="M0.6,48.9 L0.599570815,59.4 L23.4,59.4 C22.2,53.7 21,48.5 19.6,45.7 L0.6,48.9 Z"></path>
      <path fill="#d42d6b" d="M21.7,45.5 L25.5,59.4 L59.4,59.4 L59.4,46.8 C45.1,45.2 32.2,44.4 21.7,45.5 Z"></path>
      <path fill="#d42d6b" d="M21.1,43.5 C32.8,42.7 45.2,43.1916297 59.4,44.9916297 L59.4,32.279196 C43.1,34.479196 26.2,20.7 23.7,0.6 L0.599570815,0.6 L0.599570815,11.8 C10.2,21.5 17.7,33.8 21.1,43.5 Z"></path>
      <path fill="#d42d6b" d="M25.6,0.6 L59.4,0.6 L59.4,30.4 C41,32.5 27.8,17.7 25.6,0.6 Z"></path>
  </g>
</svg>
  1. width和height:svg图片大小,默认单位px。

  2. transform:scale(1.088) :图形的整体大小缩放调整,将图片放大1.088倍,调整svg图片中间的实际图形和边框的间距。

  3. transform:translate(6.000000, 2.000000) :svg实际图形与整个图片的中间位置调整。

  4. viewBox="0 0 64 64":svg实际图形绘制的起始位置以及大小,0 0 表示x轴和y有的起始位置,即可视区View中哪个位置开始显示(可见),后面64, 64 表示长和宽但是只是一个数量,不会有具体的长度

后续学习中补充