svg viewBox屬性

我正在從它的官方文檔中學習svg，有這樣的路線。我不明白，如果它已經有width和height屬性，那麼在viewBox="0 0 1500 1000"中指定它又有什麼意義？這是說，「一個px單位被定義爲等於一個用戶單位，因此，官方文檔中長度爲」5px「的長度與長度爲」5「的長度相同，因此該viewBox寬度爲1500px和1000高度視圖，超過300像素和200像素。那麼爲什麼它首先定義了寬度和高度值呢？svg viewBox屬性

<svg width="300px" height="200px" version="1.1" 
     viewBox="0 0 1500 1000" preserveAspectRatio="none" 
     xmlns="http://www.w3.org/2000/svg">

來源

2013-03-11 Jolin

寬度和高度是<svg>有多大。 viewBox控制其內容的顯示方式，因此viewBox =「0 0 1500 1000」會將<svg>元素的內容縮小5倍（1500/300 = 5和1000/200 = 5），內容將爲1/5它們的尺寸是沒有viewBox的，但是<svg>

想象一下，你有一個彈性表面，並將它切成4個相同的部分。如果你扔掉3件，你的表面就是原始表面的1/4。如果您現在將表面拉伸並使其與原始表面尺寸相同，則表面上的所有物體的尺寸將是其兩倍。這就是viewBox和width/height的關係。

來源

2013-03-11 10:31:41

量表下來？如果沒有viewBox，圖像將是300px寬，現在它必須被拉伸到1500px寬。我會調用這個縮放比例來顯示5倍於指定大小的內容。 – 2016-10-28 12:08:04

* 2017-03-20 18:12:39

@AloisMahdal請問另一個問題，關於你不明白的全部信息。來回評論並不理想。 – 2017-03-20 18:58:50

如果您未指定視圖框，則將元素中的所有無單位數字假定爲像素。（並且SVG假定每釐米像素需要90 dpi或像素，以便從像素cm到像素等單位進行轉換。）

使用viewbox，您可以在元素中創建無單位數字，表示「用戶單位」，並指定這些單位如何映射到大小。爲了簡單起見，只考慮x座標，即尺子。你的viewbox表示你的尺子將有1500個單位來匹配svg的200像素尺寸寬度。

從0到1500（無單位，即用戶單位）的線元素將拉伸200個像素，即橫跨svg圖形的寬度。

（而且由於SVG是不損失分辨率可擴展的，像素真的沒有當用戶放大或出指的是在現實世界中很多。）

它的座標變換各種各樣的。

我建議你從一本像「SVG Essentials」這樣的書中學習，大概使用10美元，我從中粗略地引用了這個答案。

來源

2013-06-03 01:36:15 bootchk

默認情況下

<svg width="300" height="200">

的SVG電網的「尺子」是像素（在SVG各種形狀的像素爲測量單位）

但是你想使用你自己的單位，您可以使用視框ATTR爲：

<svg width="300" height="200" viewBox="0 0 1500 1000">

這意味着：

個橫軸： 1500（您的寬度單位）= 300像素=> 1（您的寬度單位）= 300/1500px = 1/5像素

縱軸： 1000（您的高度單位）= 200像素=> 1（您的高度單位）= 200/1000像素= 1/5像素

現在在SVG所有形狀將縮放：

它們的寬度擴展到1/5像素（1/5 < 1 =>縮小）與原點比較。

它們的高度也擴展到1/5像素（1/5 < 1 =>按比例縮小）比較原點

來源

2017-12-30 05:56:58 user3765825

回答

相關問題