我想使用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>
-tag中没有有效的<svg>
-tag,因此您必须更改以下行:
var image = document.createElement("img");
变成:
var image = document.createElementNS("http://www.w3.org/2000/svg","image");
此外,您应该在html内放置一个encoding-declaration:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
否则,svg元素在没有经过ASCII编码时不知道如何解释符号,并且至少在FF之后会出现难看的错误。
希望这对您有所帮助!
聚苯乙烯
IE11不知道append
HTML节点的方法:
$('svg')[0].append(def)
但是appendChild
:
$('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>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句