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」 HEIGHT = 「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 2012-02-23 04:18:44

原始大小意味着該文件的圖像尺寸 – hkguile 2012-02-23 04:24:56

仍不清楚。你爲什麼沒有改變width =「87」到width =「120」？你是否試圖說有一系列不同尺寸的不同圖像，你事先不知道？ – SpliFF 2012-02-23 04:30:10

你要明白，在寬度和高度的圖像可視區域的範圍，而不是圖像的「大小」。換言之，這些值是圖像應該佔據的最大區域。如果光柵（位圖）圖像小於或大於該區域，則縮放和定位由preserveAspectRatio屬性控制。如果你沒有設置寬度和高度，他們默認爲0，這就是爲什麼你沒有看到任何東西。該規範說：

'圖像'元素建立一個新的視口，參考文件，如建立一個新的視口中所述。新的視口的邊界由屬性'x'，'y'，'寬度'和'高度'定義。參考圖像的放置和縮放由 'imageAspectRatio'屬性控制。

所以，你要尋找的解決方案是將寬度/高度設置爲你希望的形象來填充，然後設置preserveAspectRatio爲適當的值設置比例和位置，你想要的方式（最大面積該規範提供了一個示例SVG，其中顯示了preserveAspectRatio的一些可能行爲）。

來源

2012-02-23 08:37:34 SpliFF

preserveAspectRatio允許我們做'background-size：contains'c.q.的CSS等價物。 '背景大小：封面'。 https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/preserveAspectRatio – Ideogram 2017-01-22 08:47:08

用於演示SpliFF答案的codepen（以及我以前的評論:)）http://codepen.io/ideogram/pen/ apWLNG – Ideogram 2017-01-22 08:55:54

SVG圖像標籤尺寸

回答

相關問題