我怎樣才能將一個單一的SVG元素（而不是整個SVG檔案或其部分內容）渲染到影像或畫布上？
我有一個有很多節點的SVG檔案。如果我渲染整個SVG或其中的一部分，所產生的影像將包含我不感興趣的其他圖形片段。我對一個特定的SVG元素感興趣，希望渲染它的全部內容，而不需要其他東西。
例子：
。<!DOCTYPE html>
<html>
<body>
< svg height="150" width="150">
< circle cx="50" cy="50" r="25" stroke="green" strok- width="3" fill="灰色" />
< circle id="IWantToRenderThis" cx="75" cy="75" r="25" stroke="red" stroke-width="3" fill="白色" />
< circle cx="100" cy="100" r="25" stroke="blue" strok- width="3" fill="black" />
</svg>
<script>
const target = document.getElementById("IWantToRenderThis") 。
//如何將*target*渲染成一個紋理？
</script>>
</body>
</html>/span>我怎樣才能單獨呈現target？我想獲得一個沒有其他兩個圓圈的痕跡的影像，一個透明的背景，以及合適的尺寸，以完美地適應target。
uj5u.com熱心網友回復：
你可以洗掉所有的元素，除了你想渲染的那個。 為了讓SVG適應剩下的元素，你需要計算一個新的位置和大小。對于你的例子，代碼可以是這樣的：
。<!DOCTYPE html>
<html>
<body>
< svg height="150" width="150" id="svg"/span>>
< circle cx="50" cy="50" r="25" stroke="green" strok- width="3" fill="灰色" />
< circle id="IWantToRenderThis" cx="75" cy="75" r="25" stroke="red" stroke-width="3" fill="白色" />
< circle cx="100" cy="100" r="25" stroke="blue" strok- width="3" fill="black" />
</svg>
<script>
const svg = document.getElementById("svg") 。
const target = document.getElementById("IWantToRenderThis"/span>) 。
const children = svg.children;
//洗掉除目標元素外的所有子元素。
for(let index = 0; index < children.length; index ) {
const child = children[index];
if(child.id !== 'IWantToRenderThis') {
child.remove()
}
}
//重新計算元素位置和svg大小。
const targetSize = parseInt(target.getAttribute('r'/span>)
const targetStroke = parseInt(target.getAttribute('strok-width')
target.setAttribute('cx'/span>, targetSize (targetStroke/2)
target.setAttribute('cy', targetSize (targetStroke/ 2)
svg.setAttribute('width', targetSize*2 targetStroke)
svg.setAttribute('height', targetSize*2 targetStroke)
</script>>
</body>
</html>/span>注意，你必須包括你的元素的描邊寬度，以正確計算它的新位置和SVG的新尺寸。
uj5u.com熱心網友回復：
在這里，目標元素只是使用outerHTML復制到一個新的資料URL中，代表新的SVG，加載到一個影像物件中，在畫布中繪制并匯出為一個PNG影像。
let img = document. getElementById('img'/span>)。
let target = document.getElementById("IWantToRenderThis") 。
let svg = target.closest('svg');
let width = svg.attributes['width'].value。
let height = svg.attributes['height'].value。
let image = new Image() 。
let canvas = document.getElementById('canvas');
canvas.height=高度。
canvas.width = width;
let ctx = canvas.getContext('2d')。
image.addEventListener('load', e => {
ctx.drawImage(e.target, 0, 0, e． target.width, e.target.height）。)
img.src = canvas.toDataURL("image/png") 。
});
image.src = `data:image/svg xml,<svg xmlns="http://www.w3.org/2000/svg"
width="${width}" height="${height}">${target.outerHTML}</svg>`; <p>/span>Original SVG: </p>Original SVG: </p>Original SVG.
< svg id="svg"/span> height="150" width="150">
< circle cx="50" cy="50" r="25" stroke="green" strok- width="3" fill="灰色" />
< circle id="IWantToRenderThis" cx="75" cy="75" r="25" stroke="red" stroke-width="3" fill="白色" />
< circle cx="100" cy="100" r="25" stroke="blue" strok- width="3" fill="black" />
</svg>
<p>在canvas中渲染的SVG：</p>
<canvas id="canvas"> </canvas>
<p>基于畫布的PNG影像：</p>
<img id="img"/gt;轉載請註明出處，本文鏈接：https://www.uj5u.com/net/320107.html
標籤：
上一篇：旋轉的矩形與文本框不匹配