SVG画像タグサイズイメージタグ内

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <body> 
     <svg 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     id="test1" 
     height="1000px" 
     width="1000px"> 
      <image id="testimg1" xlink:href="http://localhost/at/src/html5test/map1.png" width="87" height="66" x="0" y="0"/> 

     </svg> 
     </p>   
    </body> 
</html>

SVG画像タグサイズイメージタグ内

、幅= "87" 高さ= "66" 状態に絶対必要ですか？画像に元のサイズを表示させたい（元のサイズはwidth = "180" height = "120"）、それは可能でしょうか？

この場合、width = "87" height = "66"を削除すると、svg全体に何も表示されません。あなたは幅と高さは、画像ビューポートではなく、画像の「サイズ」の範囲であることを理解する必要が

<svg 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    id="test1" 
    height="1000px" 
    width="1000px"> 
     <image id="testimg1" xlink:href="http://localhost/at/src/html5test/1.svg" x="0" y="0" /> 
     <image id="testimg2" xlink:href="http://localhost/at/src/html5test/2.svg" x="19" y="127" /> 
     <image id="testimg3" xlink:href="http://localhost/at/src/html5test/3.svg" x="130" y="110" />    

    </svg>

おかげ

出典

2012-02-23 hkguile

あなたの質問はよく言われていません。たとえば、元のサイズの画像は何ですか？なぜそれを既に使用していないのですか（あなたはそれを知っていますか？）あなたは相対的なサイズか絶対的なサイズをお探しですか？あなたは何を達成しようとしていますか？あなたは仕様を見てきましたか属性なしで試しましたか？ – SpliFF

元のサイズはそのファイルの画像サイズを意味します – hkguile

まだ不明です。なぜwidth = "87"からwidth = "120"に変更していないのですか？あなたは、あなたがあらかじめ知っていないさまざまな次元の異なるイメージの範囲があると言っていますか？ – SpliFF

。別の言い方をすれば、これらの値は画像が占めるべき最大領域です。ラスタ（ビットマップ）イメージがその領域よりも小さいか大きいと判明した場合、スケーリングと位置付けはpreserveAspectRatio属性によって制御されます。幅と高さを設定しないと、デフォルト値は0になります。何も表示されないのはそのためです。スペックは言う：

新しいビューポートの確立で説明したように「画像」要素が参照されたファイルのための新しいビューポートを確立します。新しいビューポートの境界は、属性 'x'、 'y'、 'width'および 'height'によって定義されます。参照されるイメージの配置とスケーリングは、の 'image'要素の 'preserveAspectRatio'属性によって制御されます。

だからあなたが探しているソリューションは、（あなたがイメージを埋めるために期待する最大面積の幅/高さを設定して、スケールを設定し、あなたが望むように配置するために適切な値にpreserveAspectRatioを設定することですこの仕様には、preserveAspectRatioの可能な動作のいくつかを示すSVGの例があります）。

出典

2012-02-23 08:37:34 SpliFF

preserveAspectRatioでは、 'background-size：contains' c.qというCSSに相当する処理を実行できます。 'background-size：cover' https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio – Ideogram

SpliFFの解答（と私の前のコメント:)を示すcodepen http://codepen.io/ideogram/pen/適用 – Ideogram

SVG画像タグサイズイメージタグ内

答えて

関連する問題