所以,我有一個HTML格式的SVG文件,我聽說過這種格式的一個事情就是它在放大時不會全部像素化。在html中調整SVG大小?
我知道一個JPEG或任何我可以它存儲爲50乘50圖標,然後實際顯示爲(相當像素)100乘100縮略圖(或10乘10),手動設置高度和image_src標籤中的寬度。
但是,SVG文件似乎與object/embed標籤一起使用,並且更改THOSE的高度或寬度只會導致爲照片分配更多空間。
是否有任何方法可以指定您希望顯示的SVG圖像小於或大於實際存儲在文件系統中?
所以,我有一個HTML格式的SVG文件,我聽說過這種格式的一個事情就是它在放大時不會全部像素化。在html中調整SVG大小?
我知道一個JPEG或任何我可以它存儲爲50乘50圖標,然後實際顯示爲(相當像素)100乘100縮略圖(或10乘10),手動設置高度和image_src標籤中的寬度。
但是,SVG文件似乎與object/embed標籤一起使用,並且更改THOSE的高度或寬度只會導致爲照片分配更多空間。
是否有任何方法可以指定您希望顯示的SVG圖像小於或大於實際存儲在文件系統中?
用文本編輯器打開.svg
文件(這只是XML),並期待這樣的事情在頂部:
<svg ... width="50px" height="50px"...
擦除width和height屬性;默認值是100%,所以它應該延伸到容器允許的範圍內。
嘗試這些:
設置失蹤視框,並在設定的高度的高度和寬度值填寫,並在SVG標籤高度屬性
然後通過簡單的縮放圖片將高度和寬度設置爲所需的百分比值值。祝你好運。
設置一個固定的寬高比preserveAspectRatio="X200Y200 meet
(例如200像素),但它沒有必要
例如
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="10%"
height="10%"
preserveAspectRatio="x200Y200 meet"
viewBox="0 0 350 350"
id="svg2"
version="1.1"
inkscape:version="0.48.0 r9654"
sodipodi:docname="namesvg.svg">
可以通過在圖像標記和尺寸圖像標籤即
<img width="200px" src="lion.svg"></img>
我認爲使用的問題在於,您失去了
改變容器的寬度顯示SVG調整其大小也修正它,而不是改變源文件的寬度和高度。
.SvgImage img{ width:80%; }
這修復我再上漿SVG的問題。你可以根據你的要求給出任何%。
這是獲得使用svg.getBox()
界限的例子: https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44
在你得到,你可以插入SVG正確設置視框號結束。然後在父div上使用任何css,就完成了。
// get all SVG objects in the DOM
var svgs = document.getElementsByTagName("svg");
var svg = svgs[0],
box = svg.getBBox(), // <- get the visual boundary required to view all children
viewBox = [box.x, box.y, box.width, box.height].join(" ");
// set viewable area based on value above
svg.setAttribute("viewBox", viewBox);
是的,這是正確的,但你也需要添加一個「視框」屬性(如視框=「0 0 50 50」在你的50x50px例子),否則內容可能無法正確縮放(將依賴於容器尺寸)。 Scour會自動爲你做這件事,http://www.codedread.com/scour/。 – 2010-06-27 12:54:05
Hooray!這有幫助!我已經在文件中有100%的東西,事實證明,但視圖框是關鍵!謝謝你們倆! – Jenny 2010-06-27 15:28:20
如果對其他人不明顯,'viewBox'區分大小寫。另外,如果您裁剪圖像,前兩個座標是左上角,第二個兩個座標是*縮放前的寬度和高度*。 – 2013-10-18 03:42:06