Comment utiliser SVG avec JS pour dessiner des images

Cet article présente principalement comment utiliser SVG avec JS pour dessiner des images. Maintenant, je le partage avec tout le monde. Les amis dans le besoin peuvent s'y référer

Contexte :

Total Il y a 3 fichiers : fichier svg, fichier html, fichier js.

Il existe une image SVG, qui est introduite dans le fichier HTML à l'aide de la balise embed

Fichier SVG :

<svg width="640" height="400" xmlns="http://www.w3.org/2000/svg" id="svgColumn">

    <text x="200" y="20" font-size="20">SVG 华东地区手机12个月的数据 柱状图</text>
    <line x1="20" y1="380" x2="620" y2="380" stroke="black" stroke-width="1.5" />
    <line x1="20" y1="380" x2="20" y2="1" style="stroke: black; stroke-width: 1.5" />
    <path d="M600 360 L620 380 L600 400 Z" style="stroke: black; stroke-width: 1" />
    <path d="M1 20 L20 1 L40 20 Z" style="stroke: black; stroke-width: 1" />
</svg>

Fichier HTML :

<p id="svg1">
    <embed src="./baidu34-36(svg-canvas)/column.svg" id="embed" width="640" height="400"
           type="image/svg+xml">
</p>

Utilisez ensuite les fichiers js pour manipuler le svg et insérer des graphiques.

Le premier obstacle : obtenir le svg dom,

Si votre svg est écrit directement dans le fichier html, alors svg et HTML partagent un document, vous pouvez directement utiliser document.getElementById(svg id) peut être obtenu.

Cependant, dans des circonstances normales, il n'est pas recommandé de les mélanger. Par exemple, l'image de la colonne ici est un fichier svg séparé, puis inséré dans HTML à l'aide de l'intégration.

Remarque : les fichiers SVG insérés via embed et object ont leur propre document :

À ce moment, encore une fois Si vous le souhaitez get svg, vous devez utiliser :

getSVGDocument()；

Utilisation : obtenez d'abord le nœud d'intégration, puis le document svg, puis le nœud svg :

function drawColumn(data) {    var nameSpace = 'http://www.w3.org/2000/svg';    var max = Math.max.apply(null, data);    var proportion = 350/max;    var interval = 35; //column间隔
    var columnStyle = 'stroke: blue; fill: orange';    var embedSVG = document.getElementById('embed').getSVGDocument().getElementById('svgColumn');//关键代码：embedSVG的赋值。最后的getElementById('svgColumn')，是svg文件中，svg标签的id
    for (let singleColumn of data) {        var rect = document.createElementNS(nameSpace,'rect');//creat新的svg节点，rect。
        rect.style = columnStyle; //给rect节点设置style
        height = singleColumn*proportion;
        rect.setAttribute('width', '30'); //使用setAttribute来设置rect节点属性
        rect.setAttribute('height', height);
        rect.setAttribute('x', interval);
        rect.setAttribute('y', 380-height);
        embedSVG.appendChild(rect); //将这个新的rect节点 添加到svg节点里
        interval += 45
    }
}

Remarque :

De plus, contrairement aux objets élément HTML qui peuvent attribuer directement des valeurs à certains attributs, les objets élément SVG doivent définir les valeurs d'attribut en appelant la méthode

. setAttribute()

Utiliser rect.width = 30 ne fonctionne pas.

Recommandations associées :

Comment implémenter une liaison unidirectionnelle en js (avec code)

Comment utiliser JS Obtenez la latitude et la longitude locales

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!