SVGの粗談

背景
最近ずっとレポートなどの需要をしていて、highchartsを使うことが多いです.highchartsはsvgを使って絵を描くので、svgを勉強して、少し記録します.
概況
svgはXML言語の一種である.SVGは、必要な線と形状を定義することによってグラフィックを作成したり、既存のビットマップを変更したり、これらの2つの方法を組み合わせてグラフィックを作成したりすることができます.図形とその構成部分は変形したり、合成したり、フィルタで外観を完全に変更したりすることができます.正確ではないかもしれませんが、簡単に言えば、「絵を描くことができるhtmlです」.
使用法
座標
svgの座標系はhtmlと同様に,要素の左上隅を(0,0)座標とする.
ルート要素
まず、ルート要素svgを宣言します.svg要素の属性は少なくない必要があります.

1、version baseProfile  svg   
2、width、height  svg   
3、xmlns      。

グラフィックの描画

//     (10,10)   ，     30，   5(  )，        


//      80，     (150，100),        


//   (10,50) (110,150)        


//     。   ：(75，75)，    :20，    :5


//     ，points      。


//   。d    ：                     。highcharts       path  。path   ，   ，         。        。



  ...

g元素
要素gは、オブジェクトを結合するための容器である.g要素に追加された変換は、そのすべてのサブ要素に適用されます.g要素に追加された属性は、そのすべてのサブ要素によって継承されます.さらに、g要素は、複雑なオブジェクトを定義するために使用されてもよく、その後、use要素によって参照されてもよい.

use要素use要素は、SVGドキュメント内でターゲットノードを取得し、他の場所でコピーする.use要素はhtmlのテンプレートに相当します.

svgでのCSSの使用
svgではcss制御スタイルが使用でき、htmlと変わらない.ただし、すべてのプロパティをcssで設定できるわけではありません.例えば、width、heightなどは、cssを用いて設定することはできず、svg要素、例えば要素に書かなければならない.
では、cssで設定できる属性はどれですか?

はcssを使用して設定できます.https://www.w3.org/TR/SVG/pro...

はcssを使用して設定できません.https://www.w3.org/TR/SVG/att...

svgではhtmlのようにclassを使用することもできます.例えば、

    12:48


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

svgでCSSを使うときの注意点
注意、svgのcssとhtmlのcssには違いがあります.最も重要で、最も間違いやすいのはtransformという属性です.前から深く穴をあけられていた.
すでに詳しい文章があるので、ここでは一つ一つ説明しません.記事のアドレス:

https://www.zhangxinxu.com/wo...

https://css-tricks.com/transf...

svgでのDOM操作の使用
svgでのDOM操作はhtmlと同じです.例:

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

svgをhtmlのようにしてDOM操作を行うだけで問題ありません.svgとcanvasの比較
どちらも役割上は同じで、h 5ページで画像の描画を行います.しかし、両者には著しい違いがある.

svgはxmlで図形を記述し、canvasはjsを使用して図形を描画する.この点ではsvgのほうが簡単です.

svgはイベントプロセッサをサポートし、canvasはイベントプロセッサをサポートしません.

svgはベクトルに基づいており、画像サイズの変化をうまく処理することができる.canvasはビットマップベースであり、サイズ変更はできない.

canvasが提供する機能は、画素処理、ダイナミックレンダリング、ビッグデータ量描画に適しています.要素が特に多い場合、canvasの性能はより良い.結局10000以上のdom要素のsvg、ブラウザはきっと耐えられないに違いない.

など...

終わりの言葉
最近の接触もsvgなので、少し研究しました.フロントエンドの可視化は挑戦に満ちており,非常に興味深い方向であり,深く研究する価値がある.