爲什麼這個svg被裁剪並且沒有縮放？

我是SVG的新手，有點驚訝，這個例子被裁剪，沒有縮放？使用svg元素中的寬度/高度使其可縮放/可調整大小的缺失？爲什麼這個svg被裁剪並且沒有縮放？

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
    "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    version="1.1" 
    width="200px" 
    height="200px" 
    viewBox="0 0 400px 400px"> 
    <g fill-opacity="0.7" stroke="black" stroke-width="0.1cm"> 
    <circle cx="200px" cy="60px" r="100" fill="red" 
        transform="translate(0,50)" /> 
    <circle cx="200px" cy="60px" r="100" fill="blue" 
        transform="translate(70,150)" /> 
    <circle cx="200px" cy="60px" r="100" fill="green" 
        transform="translate(-70,150)" /> 
    </g> 
</svg>

來源

2010-11-29 grm

我發現，將viewBox更改爲「0 0 400 400」（不含px）會使其縮放而不裁剪。我的問題仍然有效。爲什麼上面的例子是裁剪而不是縮放？謝謝。 – grm 2010-11-29 09:19:17

因爲如果您的視框是無效視口是由最外層的元素的寬度和高度（SVG元素在200x200px你的情況）來確定。由於您的內容溢出，因此會被裁剪。

通過定義一個有效的400x400的viewBox，你給了你的內容在viewBox裏面有足夠的空間，但它被全部縮放以適應SVG元素。 viewBox是映射到真實空間上的一種虛擬空間。

這個問題相當複雜。視口和viewbox是不同的東西。該規範涵蓋了兩個細節：http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute

來源

2010-11-29 09:32:15 SpliFF

謝謝，理解它如何映射到用戶空間仍然有點混亂，但我必須被viewBox/viewPort弄糊塗。 – grm 2010-11-29 13:34:31

爲什麼這個svg被裁剪並且沒有縮放？

回答

相關問題