如何使用 jsDom - node.js 操作 svg？

Question

如何使用 jsDom - node.js 操作 svg？

我有以下svg文件

FileName :座位布局.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
  <g id="111">
     <rect x="130" y= "130" height="320" width="550" id="rect1" fill ="white" stroke="blue" >       </rect>
  </g>
</svg>

Run Code Online (Sandbox Code Playgroud)

笔记

技术/编程 - node.js

我想将文本元素附加到rect元素内

 <text x="0" y="10" font-family="Verdana" font-size="55" fill="blue" > Hello </text>

Run Code Online (Sandbox Code Playgroud)

我曾尝试使用jsDOM来实现。但它不起作用。

 jsdom.env('seatLayout.svg', function (errors, window) {
    if(!errors){
       console.log(window.document.getElementById("rect1"));
    }
 });

Run Code Online (Sandbox Code Playgroud)

问题

它正在记录整个窗口对象而不是rect元素。

是否可以使用jsDOM操作 svg ？

任何建议将不胜感激

Answer 1

Amo*_*rni 3

希望你正在寻找操纵innerHTML你的rect1

注意：正如 Robert Longson 指出的一些SVG标签，例如<circle>不能是的子级<rect>，因此您还需要考虑的这些事情SVG。我不擅长SVG，但以下是执行所需操作的 Node.js 代码。

Node.js 代码：

var strSVG = '<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">  <g id="111"> <rect x="130" y= "130" height="320" width="550" id="rect1" fill ="white" stroke="blue" >       </rect>  </g></svg>'
var strYourText = 'Hello';
var jsdom = require("jsdom");

jsdom.env({
        html : strSVG, 
        done : function (errors, window) {
            window.document.getElementById("rect1").innerHTML = strYourText;
            console.log(window.document.getElementsByTagName('html')[0].innerHTML); 
        }
    }
);

Run Code Online (Sandbox Code Playgroud)

更新：以下代码可用于生成有效的 DOCTYPE 字符串。

var node = document.doctype;
var html = "<!DOCTYPE "
         + node.name
         + (node.publicId ? ' PUBLIC "' + node.publicId + '"' : '')
         + (!node.publicId && node.systemId ? ' SYSTEM' : '') 
         + (node.systemId ? ' "' + node.systemId + '"' : '')
         + '>';

Run Code Online (Sandbox Code Playgroud)

此方法返回有效（HTML5）doctypes的正确字符串，例如：

<!DOCTYPE html>
<!DOCTYPE html SYSTEM "about:legacy-compat">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">

代码解释：

node.name      # Holds the name of the root element, eg: HTML / html
node.publicId  # If this property is present, then it's a public document type.
               #>Prefix PUBLIC
!node.publicId && node.systemId
               # If there's no publicId, but a systemId, prefix SYSTEM
node.systemId  # Append this if present

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，7 月前
查看次数：	4191 次
最近记录：	11 年，7 月前