将<img/>属性从一个标记转移到另一个标记

Question

我的目标是使用svg.js屏蔽投资组合中的每个单独图像，以生成图像蒙版。我正在使用svg.js和cargo.collective主题。

我写了一些js来生成<svg>标记并单独包装一组图像，但这样可以正常工作<img>标记不会在<svg></svg>内呈现

要解决此问题，我使用svg.js生成单独的<image>标记。这就是我的问题所在 - 我似乎无法将<img>中的来源转移到<image>中创建的新svg.js标记中我的最佳努力返回{object object] { {1}} href。

我想在<image>标签内部渲染图像，这样我就可以将遮罩应用于它们，而不管容器中实际存在什么图像。

HTML

<svg>

Answer 1

svg <image>标签有一个xlink：href属性，它指向图像数据而不是src属性。

Answer 2

我希望我明白你想做什么，但你提供的小提琴例子很糟糕。 svg.js中有一个插件，可以让你吸收svg.js中的现有SVG：https://github.com/wout/svg.absorb.jshttps://github.com/wout/svg.absorb.js。您需要在示例中使用它。但是，你的svg非常简单，所以从头开始创建它可能会更好。因此，不要将破坏的SVG：s包含在你的dom中，你可以在服务器端生成一个javascript数组，并用它来生成你的SVG：s。

var imageSrc = ['http://placekitten.com/g/200/300', 'http://placekitten.com/g/200/300'];

//get SVG target
var target = $("#target");

// Create SVG:s
imageSrc.forEach(function (src) {
    // create a wrapper div for the SVG element
    var svgWrapper = $('<div>').appendTo(target);

    // Create the SVG, please note that we need the native DOM node
    // That is why [0] is used
    var draw = SVG(svgWrapper[0]).size(300, 200);

    // draw the image
    var image = draw.image(src);

    //polygon image mask
    var polygon = draw.polygon('0,0 275,50 0,270').fill('#f2f0ce').stroke({
        width: 0
    });

    // create the mask
    image.maskWith(polygon);
});

示例：http://jsfiddle.net/h9ydmt80/

如果你在服务器端生成页面而你不需要继续操作SVG：我只会在那里生成SVG：s。在那种情况下，它们看起来像这样。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="0" height="0" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <mask id="mask">
            <polygon points="0,0 275,50 0,270" fill="#f2f0ce" stroke-width="0"></polygon>
        </mask>
    </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="http://placekitten.com/g/200/300" width="200" height="300" mask="url(#mask)"></image>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200" xmlns:xlink="http://www.w3.org/1999/xlink">
    <image xlink:href="http://placekitten.com/g/200/300" width="200" height="300" mask="url(#mask)"></image>
</svg>

第一个SVG不可见，只包含掩码，最后两个SVG：s只包含图像和第一个SVG中掩码的引用。

示例：http://jsfiddle.net/ayw8w9ak/2/

请注意，它不是SVG中的src属性：s，它是xlink:href，如上例所示。