Question

我尝试使用剪辑路径创建图像，但是当动态创建对象时，图像不会呈现。

以下是代码示例，第一个SVG是从JS创建的，第二个是从Javascript创建的。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1" id="parent"></svg>
<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <clippath id="cut-off-bottom">
        <rect x="0" y="0" width="200" height="100" />
    </clippath>
    <image id="imgs" xlink:href="https://images.unsplash.com/photo-1473042904451-00171c69419d?auto=format&fit=crop&w=1375&q=80" clip-path="url(#clip)"></image>
</svg>

和JS：

var _svgNS = 'http://www.w3.org/2000/svg';
var parent = document.getElementById('parent');

var clippath = document.createElementNS(_svgNS, 'clipPath');
clippath.setAttributeNS(null, 'id', 'clip');
parent.appendChild(clippath);

var rect = document.createElementNS(_svgNS, 'rect');
rect.setAttributeNS(null, 'x', '0');
rect.setAttributeNS(null, 'y', '0');
rect.setAttributeNS(null, 'width', '200');
rect.setAttributeNS(null, 'height', '200');
clippath.appendChild(rect);


var imageElement = document.createElementNS(_svgNS, 'image');
imageElement.setAttribute('xlink:href', 'https://images.unsplash.com/photo-1473042904451-00171c69419d?auto=format&fit=crop&w=1375&q=80');
imageElement.setAttribute('clip-path', 'url(#clip)');
parent.appendChild(imageElement);

以下是一个示例：https://jsfiddle.net/n8pzo52q/

Answer 1

您似乎已将所有setAttribute / setAttributeNS调用混淆。

setAttribute在null命名空间中设置属性，因此您不需要为该用例使用setAttributeNS。
如果你的空名称空间中没有属性，例如xlink：href那么你必须使用setAttributeNS。

＆＃13;

var _svgNS = 'http://www.w3.org/2000/svg';
var parent = document.getElementById('parent');

var clippath = document.createElementNS(_svgNS, 'clipPath');
clippath.setAttribute('id', 'clip');
parent.appendChild(clippath);

var rect = document.createElementNS(_svgNS, 'rect');
rect.setAttribute('x', '0');
rect.setAttribute('y', '0');
rect.setAttribute('width', '200');
rect.setAttribute('height', '200');
clippath.appendChild(rect);


var imageElement = document.createElementNS(_svgNS, 'image');
imageElement.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'https://images.unsplash.com/photo-1473042904451-00171c69419d?auto=format&fit=crop&w=1375&q=80');
imageElement.setAttribute('clip-path', 'url(#clip)');
parent.appendChild(imageElement);

＆＃13;

<svg id="parent"></svg>

＆＃13;

从javascript创建的SVG Image对象不会呈现

1 个答案: