我想使用javascript向多边形添加一个模式,但是没有显示该模式。
我试图通过附加SVG标记来实现这一点。
<svg tabindex="1" style="width: 175px; height: 216.506px;">
<polygon points="25,0 75,0 100,43 75,86 25,86 0,43" tabindex="1" hex-row="0" hex-column="0" fill="gray"></polygon>
<polygon points="100,44 150,44 175,87 150,130 100,130 75,87" tabindex="1" hex-row="0" hex-column="1" fill="gray"></polygon>
<polygon points="25,87 75,87 100,130 75,173 25,173 0,130" tabindex="1" hex-row="1" hex-column="0" fill="gray"></polygon>
<polygon id="chosen-one" points="100,130 150,130 175,173 150,216 100,216 75,173" tabindex="1" hex-row="1" hex-column="1" fill=""></polygon>
</svg>
var def = document.createElementNS("http://www.w3.org/2000/svg", "defs");
var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute('id', 'image1');
pattern.setAttribute('x', '0%');
pattern.setAttribute('y', '0%');
pattern.setAttribute('height', '100%');
pattern.setAttribute('width', '100%');
pattern.setAttribute('viewBox', '0 0 64 64');
var image = document.createElement("img");
image.setAttribute('x', '0%');
image.setAttribute('y', '0%');
image.setAttribute('width', '64');
image.setAttribute('height', '64');
image.setAttribute('href', 'https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png');
pattern.appendChild(image)
def.appendChild(pattern)
$('svg')[0].append(def);
var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttribute('href', '#hexfield');
use.setAttribute('fill', 'yellow');
$('svg')[0].append(use)
var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttribute('href', '#hexfield');
use.setAttribute('fill', 'url(#image1)');
$('svg')[0].append(use)
// element that will be wrapped
var el = document.querySelector('#chosen-one');
// create wrapper container
var wrapper = document.createElementNS("http://www.w3.org/2000/svg", "g");
wrapper.setAttribute('id', 'hexfield')
// insert wrapper before el in the DOM tree
el.parentNode.insertBefore(wrapper, el);
// move el into wrapper
wrapper.appendChild(el);
我原以为是这样的:
但图像部分没有显示
最佳答案
<img>
-标记中没有有效的<svg>
-标记,因此必须更改此行:
var image = document.createElement("img");
进入:
var image = document.createElementNS("http://www.w3.org/2000/svg","image");
此外,您应该在html中放置一个编码声明:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
否则,svg元素不知道如何解释符号,因为它们不是ascii编码的,而且之后至少在FF上会出现一个难看的错误。
希望这对你有帮助!
附笔。
IE11不知道HTML节点的
append
-方法:$('svg')[0].append(def)
但是:
$('svg')[0].appendChild(def);
将一个图像图案应用于多个多边形:
var svg = document.getElementsByTagName('svg')[0];
var def = document.createElementNS("http://www.w3.org/2000/svg", "defs");
var pattern = document.createElementNS("http://www.w3.org/2000/svg", "pattern");
pattern.setAttribute('id', 'image1');
pattern.setAttribute('x', '0%');
pattern.setAttribute('y', '0%');
pattern.setAttribute('height', '100%');
pattern.setAttribute('width', '100%');
pattern.setAttribute('viewBox', '0 0 64 64');
var image = document.createElementNS("http://www.w3.org/2000/svg", "image");
image.setAttribute('x', '0%');
image.setAttribute('y', '0%');
image.setAttribute('width', '64');
image.setAttribute('height', '64');
image.setAttribute('href', 'https://cdn4.iconfinder.com/data/icons/imod/512/Software/labo.png');
pattern.appendChild(image)
def.appendChild(pattern)
svg.appendChild(def);
// element that will be wrapped
[1, 2, 3, 4].forEach(function(number) {
var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttribute('href', '#hexfield' + number);
use.setAttribute('fill', 'yellow');
svg.appendChild(use);
var use = document.createElementNS("http://www.w3.org/2000/svg", "use");
use.setAttribute('href', '#hexfield' + number);
use.setAttribute('fill', 'url(#image1)');
svg.appendChild(use);
var poly = document.querySelector('#poly-' + number);
// create wrapper container
var wrapper = document.createElementNS("http://www.w3.org/2000/svg", "g");
wrapper.setAttribute('id', 'hexfield' + number);
// insert wrapper before el in the DOM tree
poly.parentNode.insertBefore(wrapper, poly);
// move el into wrapper
wrapper.appendChild(poly);
});
<svg tabindex="1" style="width: 175px; height: 216.506px;">
<polygon id="poly-1" points="25,0 75,0 100,43 75,86 25,86 0,43" tabindex="1" hex-row="0" hex-column="0" fill=""></polygon>
<polygon id="poly-2" points="100,44 150,44 175,87 150,130 100,130 75,87" tabindex="1" hex-row="0" hex-column="1" fill=""></polygon>
<polygon id="poly-3" points="25,87 75,87 100,130 75,173 25,173 0,130" tabindex="1" hex-row="1" hex-column="0" fill=""></polygon>
<polygon id="poly-4" points="100,130 150,130 175,173 150,216 100,216 75,173" tabindex="1" hex-row="1" hex-column="1" fill=""></polygon>
</svg>