我正在使用畫布生成影像。我想使用該影像來填充 SVG 路徑背景。只是 SVG 的一部分。
我努力了：
<path id="path1" class="st1" d="M80.2,43.1C74,37.8,67.9,32.5,61.7,27.2c1.6-3.6,3.2-7.1,4.8-10.7C71,25.3,75.6,34.2,80.2,43.1z"/>
document.getElementById("path1").setAttribute('fill', "url('" myCanvas.toDataURL() "')");
還：
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image id="bg1" href="" x="0" y="0" width="100" height="100" />
<path id="path1" class="st1" d="M80.2,43.1C74,37.8,67.9,32.5,61.7,27.2c1.6-3.6,3.2-7.1,4.8-10.7C71,25.3,75.6,34.2,80.2,43.1z"fill="url(#img)/>
document.getElementById("bg1").setAttribute('href', "url('" myCanvas.toDataURL() "')");
我嘗試過使用和不使用 URL() 以及使用和不使用引號。
uj5u.com熱心網友回復：
是這樣的嗎？我從如何在 img 標簽中使用 base64 資料，如何用背景影像填充 svg 路徑，以及這個用于將影像下載為 base64 文本的 SO 帖子中提取資訊。
b64url = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Pencil_drawing_of_a_girl_in_ecstasy.jpg/800px-Pencil_drawing_of_a_girl_in_ecstasy.jpg"
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL(b64url, function(dataUrl) {
document.querySelector("#demoimg").src = dataUrl;
el = document.querySelector("#imgtag");
el.setAttribute("href", dataUrl);
});<image id="demoimg" width="100" />
<br>
<br>
<?xml version="1.0" encoding="UTF-8"?>
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events">
<title>Text Pattern Fill Example</title>
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
<image id="imgtag" x="0" y="0" width="100" height="100" />
</pattern>
</defs>
<path d="M5,50
l0,100 l100,0 l0,-100 l-100,0
M215,100
a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
M265,50
l50,100 l-100,0 l50,-100
z"
fill="url(#img1)" />
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/536435.html