[英]Resize svg image and areas
這是我第一次使用SVG,如果這是一個愚蠢的問題,請您道歉,但我正嘗試在我的網站上創建可點擊的大陸地圖,並已從Wikipedia獲得了正確繪制了各大陸的SVG圖像。
http://commons.wikimedia.org/wiki/File:Continents.svg
但是,此圖像為585 x 299像素,我需要的圖像為292 x 137像素。 我已經在線閱讀了這些圖像的可伸縮性,而您需要做的就是修改svg定義中的width和height值,因此我在這里做了以下操作:
<svg width="292" height="137" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
但是,這只會按比例縮放畫布,而不會縮放內部區域。 如何獲得可縮放到圖像修改尺寸的區域?
SVG可以是您在CSS中告訴它的任何大小
CSS
svg {
width:292px;
height:137px;
border:1px solid grey
}
無論有無SVG中規定的尺寸,此功能均適用。 重要的是“視圖框”,它設置了SVG的坐標結構。
到目前為止,我發現的唯一方法是將我的所有區域都包裹在一個標簽中,並且它們應用
<g transform="scale(0.68)">
將viewBox屬性(viewBox =“ 0 0 585 299”可能是您想要的)添加到svg元素。 我們可以通過使用片段標識符來模擬看起來像什么,該標識符將在原始文件上添加一個viewBox,例如
http://upload.wikimedia.org/wikipedia/commons/9/95/Continents.svg#svgView(viewBox(0,0,529,290))
那在Firefox中的顯示肯定不同。
使用這樣的viewBox :
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.0"
width="292pt" height="137pt"
viewBox="0 0 468 239"
preserveAspectRatio="xMidYMid meet"
>
<g
transform="translate(0,239) scale(0.016963,-0.016963)"
fill="#000000"
stroke="none"
>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.