Question

我正在关注svg文件

FileName : seatLayout.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>

注意

技术/编程 - node.js

我想在rect元素

中附加文本元素

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

我曾尝试使用jsDOM来实现。但它没有用。

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

问题

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

是否可以使用jsDOM操作svg？

任何建议都将不胜感激

Answer 1

希望您正在操纵innerHTML

的rect1

注意：正如罗伯特·朗森指出的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); 
        }
    }
);

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

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

此方法返回valid (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

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

注意

问题

1 个答案: