So bedienen Sie SVG mit JS, um Bilder zu zeichnen

In diesem Artikel wird hauptsächlich die Bedienung von SVG zum Zeichnen von Bildern vorgestellt. Jetzt kann ich ihn mit allen teilen, die ihn benötigen.

Hintergrund:

Insgesamt gibt es 3 Dateien: SVG-Datei, HTML-Datei, JS-Datei.

Es gibt ein SVG-Bild, das mithilfe des Embed-Tags in die HTML-Datei eingefügt wird:

SVG-Datei:

<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>

HTML-Datei:

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

und verwenden Sie dann die js-Datei, um SVG zu bearbeiten und Grafiken einzufügen.

Das erste Hindernis: SVG-Dom erhalten,

Wenn Ihr SVG direkt in die HTML-Datei geschrieben ist und SVG und HTML ein Dokument gemeinsam nutzen, können Sie document.getElementById(svg id) direkt verwenden. erhalten werden kann.

Unter normalen Umständen wird jedoch nicht empfohlen, sie zu mischen. Beispielsweise ist das Spaltenbild hier eine separate SVG-Datei und wird dann mithilfe von Einbettung in HTML eingefügt.

Hinweis: Mit Embed und Object eingefügte SVG-Dateien haben ein eigenes Dokument:

Zu diesem Zeitpunkt noch einmal, wenn Sie möchten Um SVG zu erhalten, müssen Sie Folgendes verwenden: getSVGDocument()；

Verwendung: Holen Sie sich zuerst den Einbettungsknoten, dann das SVG-Dokument und dann den SVG-Knoten:

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
    }
}

Hinweis:

Darüber hinaus müssen SVG-Elementobjekte im Gegensatz zu HTML-Elementobjekten, die einigen Attributen direkt Werte zuweisen können, Attributwerte durch Aufrufen der setAttribute()-Methode festlegen.

Die Verwendung von rect.width = 30 funktioniert nicht.

Verwandte Empfehlungen:

So implementieren Sie eine Einwegbindung in js (mit Code)

Wie um JS zu verwenden. Lokalen Breiten- und Längengrad abrufen

Das obige ist der detaillierte Inhalt vonSo bedienen Sie SVG mit JS, um Bilder zu zeichnen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!