logo标签列表

使用本地图像填充SVG元素

javascripthtmlfilesvginput
3

我希望能够通过用户在本地计算机上选择的<input type='file'/>输入，将svg元素（例如一个circle元素）填充为图像。

我知道可以使用图案来填充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路径元素

如何在画布中打开本地图片

谢谢！

2个回答
2
这似乎在最新版的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/

-1

你可以在这里找到一个不错的示例。它使用最少的JavaScript来更新pattern。根据你提供的代码进行调整，结果可能如下所示：

<html>
  <head>
    <script> 
var E; 
function prepare(){ E=document.getElementById('imgPath'); } 
function change(v){ E.setAttribute("xlink:href", v); } 
    </script>
  </head>
  <body onload="prepare()">
    <table border="2">
      <tr><td><input type="file" formmethod="GET" onchange="change(this.value)" /></td></tr>
      <tr><td>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="320" height="286" viewBox="0 0 320 86">
          <defs>
            <pattern id="imgPattern" patternUnits="userSpaceOnUse" width="100" height="100">
              <image id="imgPath" xlink:href="wall2.jpg" x="0" y="0" width="100" height="100" />
            </pattern>
          </defs>
          <circle cx=100 cy=100 r=100 fill="url(#imgPattern)" />  
        </svg>
      </td></tr>
    </table>
  </body>
</html>

它只是使用JavaScript获取图像路径的id，然后通过onchange事件触发设置SVG的xlink:href属性。

使用这个程序我得到了一个 不允许加载本地资源：file:///C:/fakepath/***.jpg 的错误。 - Nick D
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接