SVG的粗談

2023年6月27日 165次阅读来源: CoyPan

背景

近來一向在做報表之類的需求，用highcharts比較多。highcharts運用svg舉行畫圖，所以進修了一下svg，輕微紀錄一下。

概略

svg是XML言語的一種情勢。SVG能夠經由過程定義必要的線和外形來建立一個圖形，也能夠修正已有的位圖，或許將這兩種體式格局結合起來建立圖形。圖形和其組成部分能夠變形，能夠合成，還能夠經由過程濾鏡完整轉變表面。能夠不太正確的簡樸來講，”就是能夠畫圖的html“。

用法

坐標

svg的坐標體系與html的一樣，都是以元素的左上角為(0, 0)坐標。

根元素

起首聲明一個根元素svg。svg元素上的屬性是必不可少的。

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
</svg>

1、version和baseProfile一定svg的版本
2、width、height指定svg的寬高
3、xmlns指定定名空間。

繪製圖形

// 在坐標為(10,10)的處所，繪製寬高為30，表面寬5(黑色)，用白色添補的矩形
<rect x="10" y="10" width="30" height="30" stroke="black" fill="#ffffff" stroke-width="5"/>

// 繪製半徑為80，圓心位置為(150，100), 添補為綠色的圓
<circle cx="150" cy="100" r="80" fill="green" />

// 銜接(10,50)和(110,150)兩個點的一條線 
<line x1="10" x2="50" y1="110" y2="150"/>

// 繪製橢圓。中間為：(75，75)，長半徑為:20，短半徑為:5
<ellipse cx="75" cy="75" rx="20" ry="5"/>

// 繪製折線，points為折線上的點。
<polyline points="60 110, 65 120, 70 115, 75 130, 80 125, 85 140, 90 135, 95 150, 100 145"/>

// 途徑。d代表的是：一個點集數列以及別的關於怎樣繪製途徑的信息。highcharts的曲線就是運用path畫的。path很壯大，很龐雜，須要一定的數學基本。這裏就不細緻說了。
<path d="M 20 230 Q 40 205, 50 230 T 90230"/>


等等...

g元素

元素g是用來組合對象的容器。添加到g元素上的變更會應用到其一切的子元素上。添加到g元素的屬性會被其一切的子元素繼續。另外，g元素也能夠用來定義龐雜的對象，以後能夠經由過程use元夙來援用它們。

<svg width="100%" height="100%" viewBox="0 0 95 50"
     xmlns="http://www.w3.org/2000/svg">
  <g stroke="green" fill="white" stroke-width="5">
    <circle cx="25" cy="25" r="15" />
    <circle cx="40" cy="25" r="15" />
    <circle cx="55" cy="25" r="15" />
    <circle cx="70" cy="25" r="15" />
  </g>
</svg>

use元素

use元素在SVG文檔內獲得目的節點，並在別的處所複製它們。use元素就相當於html中的模板。

<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <style>
    .classA { fill:red }
  </style> 
  <defs>
    <g id="Port">
      <circle style="fill:inherit" r="10"/>
    </g>
  </defs>
 
  <text y="15">black</text>
  <use x="50" y="10" xlink:href="#Port" />
  <text y="35">red</text>
  <use x="50" y="30" xlink:href="#Port" class="classA"/>
  <text y="55">blue</text>
  <use x="50" y="50" xlink:href="#Port" style="fill:blue"/>
 </svg>

在svg中運用CSS

在svg中是能夠運用css掌握款式的，跟html沒什麼區分。然則，並非一切的屬性都能夠用css來設置。比方，width 、height等，就不能運用css來設置，必需寫在svg元素上，如<rect width="30" height="30" style="stroke: black; fill: red;"/>

那末哪些屬機能夠經由過程css來設置呢？

能夠運用css來設置：https://www.w3.org/TR/SVG/pro…
不能運用css來設置：https://www.w3.org/TR/SVG/att…

在svg中，也是能夠像html一樣運用class的，比方：

<text x="8" class="test" y="20">
    <tspan>12:48</tspan>
</text>

.test {
    font-size:12px;
    color:#333333;
    fill:#333333;
}

svg中運用CSS須要注重的處所

注重，svg中的css和html的css照樣有不一樣的處所。最主要，也是最輕易失足的，就是transform這個屬性。之前就被深深地坑過。

已經有文章說得很細緻了，這裏就不逐一說清楚明了。文章地點：

在svg中運用`DOM`操縱

在svg中運用DOM操縱和在html中是一樣的。比方：

<rect width="30" height="30" style="stroke: black; fill: red;"/>

const rect = document.querySelector('rect');
rect.getAttribute('x'); 
rect.setAttribute('x', '100');
rect.addEventListener('click', _ => { console.log(1) });
...

只須要將svg算作html一樣來舉行DOM操縱，沒有任何問題。

`svg` 與`canvas`的比較

二者在作用上都是一樣的，都是在h5頁面上舉行圖象的繪製。然則二者照樣有明顯的區分。

svg是用xml來形貌圖形的，而canvas運用js來繪製圖形。這點上，svg更簡樸。
svg支撐事宜處置懲罰器，canvas不支撐事宜處置懲罰器。
svg是基於矢量的，能夠很好的處置懲罰圖象大小變化。而canvas是基於位圖的，沒法舉行大小變化。
canvas供應的功用更原始，合適像素處置懲罰，動態襯着和大數據量繪製。當元素迥殊多的時刻，canvas的機能更好。畢竟10000多個dom元素的svg，瀏覽器一定吃不消。
等等…

結束語

也是近來老打仗svg，所以輕微研討了一下。前端可視化是一個充溢應戰，也是一個非常有意思的方向，值得深入研討。

    原文作者：CoyPan
    原文地址: https://segmentfault.com/a/1190000015393428
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。

背景

概略

用法

坐標

根元素