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

Question

我的目标是使用svg.js 对投资组合中的每个单独图像进行遮罩，以生成图像遮罩。我正在使用 svg.js 和 cargo.collective 主题。

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

为了解决这个问题，我使用 svg.js 生成一个单独的 <image> 标记。这就是我的问题所在 - 我似乎无法将<img> 中的源转移到svg.js 中创建的新<image> 标签我尽最大努力在<image> href 中返回了[object Object]。

我想让图像在 <svg> 标记内呈现，这样我就可以对它们应用蒙版，而不管容器中实际有什么图像。

HTML

<svg class="thumb_image" id="drawing" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" xmlns:xlink="http://www.w3.org/1999/xlink">
  <image id="SvgjsImage1005" width="0" height="0"></image>
  <image class="imgclip" src="http://payload280.cargocollective.com/1/16/516926/7919591/prt_275x242_1403202556_2x.jpg" width="275" height="242" data-hi-res="http://payload280.cargocollective.com/1/16/516926/7919591/prt_275x242_1403202556_2x.jpg"></image>
  <defs id="SvgjsDefs1000">
    <polygon id="SvgjsPolygon1006" points="0,0 275,50 0,270" fill="#f2f0ce" stroke-width="0"></polygon>
  </defs>
</svg>

Answer 1

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

Answer 2

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

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:s，我将只在此处生成 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:s 中的src 属性，而是上面示例中的xlink:href。