ローカルイメージでsvg要素を塗りつぶします。

svg要素を塗りつぶしたいと思います。ユーザが<input type='file'/>入力を介して自分のローカルコンピュータから選択できるイメージを持つ要素。circleローカルイメージでsvg要素を塗りつぶします。

私はあなたのパターンを使用して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)" />

しかし、私はそれがローカルイメージで動作させることはできません。

作業フィドルは素晴らしいだろう:)

Open local image in canvas

ありがとう！

出典

2016-05-19 Nick D

これは、最新の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/

出典

2016-05-19 11:52:54 ahwayakchih

これは完璧です、ありがとう:) –

-1

あなたはa decent example hereを見つけるでしょう。それはpatternを更新するために最低限のJavaScriptを使用します。自分の与えられたコードに適応し、その結果は次のようになります。

<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属性を設定します。

出典

2016-05-19 11:57:57 zx485

これで私は 'ローカルリソースを読み込むことができません：file：/// C：/ fakepath/***。jpg'エラーが発生します。 –

ローカルイメージでsvg要素を塗りつぶします。

答えて

関連する問題