我想使用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>

07-24 09:50
查看更多