7

SVG 円の中心に画像を追加しようとしています。パターンでやってみた

<pattern id="image_birds" x="0" y="0" patternUnits="userSpaceOnUse" height="100" width="100">
<image x="0" y="0" xlink:href="birds.png" height="50" width="50"></image>
</pattern>

しかし、それは画像を中央に配置しません。私はJavascriptを使用しています。

4

2 に答える 2

6

クリッピングはあなたが探していることをするはずです: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Clipping_and_masking

何かのようなもの：

<clipPath id="cut-off-bottom">
  <circle cx="100" cy="100" r="50" />
</clipPath>

<image x="25" y="25" xlink:href="http://placehold.it/150.png" height="150" width="150" clip-path="url(#cut-off-bottom)" ></image>

この例の結果は、http: //jsbin.com/EKUTUco/1/edit ?html,output で確認できます。

xサイズ、ビア、およびy属性に応じて、javascriptで画像を中央に配置するのはあなた次第です。

于 2013-09-03T08:44:44.027 に答える
3

私は答えを見つけました。私がしたことは、私のsvgにフィルターを追加することです:

<filter id = "i1" x = "0%" y = "0%" width = "100%" height = "100%">
    <feImage xlink:href = "birds.png"/>
</filter>

そしてサークルに属性を追加します：

circle.setAttribute('filter','url(#i1)');
于 2013-09-03T11:08:15.650 に答える