[英]Creating an SVG DOM element from a String
我將如何 go 關於從String
創建 SVG DOM 元素?
例子:
var svgStr = '<svg width="500" height="400" xmlns="http://www.w3.org/2000/svg"><!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ --><g><title>background</title><rect fill="#fff" id="canvas_background" height="402" width="502" y="-1" x="-1"/><g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid"><rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/></g></g><g><title>Layer 1</title><path id="svg_1" d="m118,242l64,-153l63,157c0,0 45,-71 49,-68c4,3 11,146 12,146c1,0 -173,-7 -173,-7c0,0 -61,-72 -61,-72c0,0 110,-156 46,-3z" fill-opacity="0.7" stroke-width="2" stroke="#995757" fill="#995757"/></g></svg>';
您可以使用DOMParser來解析 XML 字符串。
var parser = new DOMParser();
var doc = parser.parseFromString(stringContainingXMLSource, "image/svg+xml");
解析字符串的根元素將是 doc.documentElement
為了使其跨瀏覽器正常工作,您需要設置 html 命名空間,即您的字符串需要看起來像這樣......
var svg2='<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" ...
假設您使用的是 JavaScript,您可以簡單地將該字符串作為通過 DOM API 獲得的現有元素的innerHTML
傳遞:
var svg2 = "<svg ...> ... </svg>";
var container = document.getElementById("container");
container.innerHTML = svg2;
請參閱: JSFiddle
除了 Internet Explorer (9-11): http : //cs.sru.edu/~ddailey/svg/IframeSVG.htm之外,在 HTML 中讀取和寫入 SVG 的 innerHTML 似乎工作得很好。 如果需要 IE 兼容性(如真正的 Web 應用程序),則使用 DOM 方法創建合適的容器(對象、iframe 或嵌入)並通過該容器中的 DOM 方法一次構建一個 childNode SVG。 ) 這有點麻煩,但基礎知識在http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_HTML 中有介紹。
我正在構建 SVG 圖表,需要使用戶能夠傳遞任何 SVG 以使其成為圖表注釋。 解決方案是:
index.html - 我將子 SVG 附加到的根 SVG 元素
<svg id="chart_SVG" width="900" height="600" role="img" xmlns="http://www.w3.org/2000/svg"></svg>
api.ts - 添加注釋的 API(用 TypeScript 編寫)。 x, y - 放置注釋的坐標
function drawAnnotation(x: number, y: number, svgContent: string, svgId: string): SVGElement {
const svgRoot = document.getElementById("chart_SVG");
const svgNode = document.createRange().createContextualFragment(svgString);
svgRoot.appendChild(svgNode);
const newNode = this.svgRoot.lastChild as SVGElement;
newNode.id = svgId;
newNode.setAttribute("x", x.toString());
newNode.setAttribute("y", y.toString());
return newNode;
}
例子.ts
drawAnnotation(
100,
100,
'<svg><g><rect x="0" y="0" width="100%" height="100%" stroke="red" stroke-width="10" fill="orange"/><text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" font-family="Verdana" font-size="24" fill="blue">TEXT</text></g></svg>',
"myNewNode"
)
這是一個返回SVGELement
實例的 JS function 示例:
function svgElementFromString(str) {
const div = document.createElement('DIV');
div.innerHTML = str;
const svg = div.querySelector('svg');
if (!svg) {
throw Error('<svg> tag not found');
}
return svg;
}
您可以執行以下技巧,而不是與父母一起返回。
const template = `
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 13L13 1M1 1L13 13" stroke="#111827" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>`
const span = document.createElement('span')
span.innerHTML = template
return span.firstChild
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.