用本地图像填充svg元素

Nick D 发表于 Dev

尼克·D

我想circle用一个图像填充svg元素，例如，用户可以通过<input type='file'/>输入从本地计算机选择的图像。

我知道您可以使用一种模式来填充svg元素：

<defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>
<circle cx=100 cy=100 r=100 fill="url(#img1)" />

但是我无法将其与本地图像配合使用。

一个工作的小提琴将是惊人的:)

相关问题：

用背景图像填充SVG路径元素

在画布中打开本地图像

谢谢！

ahwayakchih

这似乎可以在最新的Chrome和Firefox中使用。

首先，HTML部分：

<input id="upload" type="file"/>

<svg>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
        </pattern>
    </defs>
    <circle cx=100 cy=100 r=100 fill="url(#img1)" />
</svg>

接下来，JS部分：

var upload = document.getElementById('upload');
var patternImage = document.querySelector('#img1 image');
var currentBlobData = null;

upload.addEventListener('change', function (e) {
    var file = this.files[0];
    if (currentBlobData) {
        URL.revokeObjectURL(currentBlobData);
    }
    currentBlobData = URL.createObjectURL(file);
    patternImage.setAttribute('xlink:href', currentBlobData);
});

最后，一个可行的小提琴演示：https : //jsfiddle.net/5qLb9m1t/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。