0

固定サイズの SVG の背景として任意の画像を配置しようとしています。望ましい動作は、SVG の固定サイズよりも大きい画像がボックス内に収まるように均一にスケーリングされ (つまり、「クリップ」ではなく「会う」)、小さい画像がその位置に表示されることです。ネイティブサイズ。(中央にもあるはずですが、その部分はわかりました。)

大きな画像を縮小するのは簡単ですが、小さな画像を拡大しないようにする方法がわかりません。何か案は?この質問と同様の問題ですが、CSS ではなく SVG が問題です。この他の質問は間違いなく関連していますが、画像のピクセルサイズが事前にわからないため、解決策は役に立ちません。

現在の SVG 構造を簡略化したバージョンを次に示します。背景画像としてPlacekittenを使用しています。

<svg xmlns="http://www.w3.org/2000/svg" id="svgroot" xlinkns="http://www.w3.org/1999/xlink" width="640" height="480" x="640" y="480" overflow="visible">
  <svg id="canvasBackground" width="640" height="480" x="0" y="0" overflow="none" style="pointer-events:none">
    <rect width="100%" height="100%" x="0" y="0" stroke="#000" fill="#FFF" style="pointer-events:none"/>
    <image id="background_image" width="100%" height="100%" preserveAspectRatio="xMidYMid" style="pointer-events:none" href="http://placekitten.com/500/400/"/>
  </svg>
</svg>
4

1 に答える 1