如何在JavaScript中向多边形添加图案?

Cloud9c

我想使用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不知道appendHTML节点的方法:

$('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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章