initial commit

1 files changed, 326 insertions, 0 deletions

diff --git a/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.html b/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.html
new file mode 100644
index 0000000000..44ae63b403
--- /dev/null
+++ b/files/zh-cn/web/css/scaling_of_svg_backgrounds/index.html
@@ -0,0 +1,326 @@
+---
+title: SVG 背景缩放
+slug: Web/CSS/Scaling_of_SVG_backgrounds
+translation_of: Web/CSS/Scaling_of_SVG_backgrounds
+---
+<div>{{cssref}}</div>
+
+<div>SVG 相比其他格式为我们提供了更多的灵活性，与此同时当我们把它用作背景图形 {{ cssxref("background-image") }} 时有更多需要我们注意的东西，尤其是在我们使用 {{ cssxref("background-size") }} 属性时。本文描述了在使用这些属性时如何处理 SVG 图像的缩放。</div>
+
+<h2 id="规则概要">规则概要</h2>
+
+<p>大部分计算方式可以用这四条规则来概括。这些规则基本上涵盖了大部分情况除了个别边缘问题。</p>
+
+<ol>
+ <li>当 {{ cssxref("background-size") }} 指定了固定的尺寸 （百分比或者其他单位），会按照固定的尺寸来。</li>
+ <li>当图片自身存在固有的比例（宽高比恒定，诸如 16:9、4:3、2.39:1、1:1 等等)，渲染出的尺寸使用这个比例。</li>
+ <li>当图像指定了尺寸，并且这个尺寸没有被修改，则使用指定的尺寸。</li>
+ <li>当不是上述情况时，则图像将呈现与背景区域相同的大小。</li>
+</ol>
+
+<p>总体来说，上列尺寸计算规则关心的是一个图像有无定义的尺寸和比例，与图片格式没有关系。具有固定尺寸的 SVG 图像依然被视为大小相同的光栅图像。</p>
+
+<h2 id="源图片示例">源图片示例</h2>
+
+<p>在深入研究使用{{ cssxref("background-size") }}并不同类型图片的影响并且得到结果之前，我们先来看看不同尺寸和大小的图像示例。</p>
+
+<p>在每个例子中，图像被渲染在 150x150 的容器内，并且在下方提供了 SVG 文件资源</p>
+
+<h3 id="无尺寸无比例">无尺寸无比例</h3>
+
+<p>下面这个图片既没有尺寸也没有比例。这种情况不会关心它的尺寸也不关心它的长宽比例。无论你的屏幕尺寸和长宽比如何，这都是一个很好的渐变桌面背景。</p>
+
+<p><img alt="no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5860/=no-dimensions-or-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5864/=no-dimensions-or-ratio.svg" title="no-dimensions-or-ratio.svg">SVG图片源码</a></p>
+
+<h3 id="指定一个维度的尺寸，但无固定比例">指定一个维度的尺寸，但无固定比例</h3>
+
+<p>这个图片指定了 100px 的宽但是没有高度也没有固定的比例。我们可以说这是一个可以在一条街道上无线延伸的壁纸。</p>
+
+<p><img alt="100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5858/=100px-wide-no-height-or-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5863/=100px-wide-no-height-or-ratio.svg" title="100px-wide-no-height-or-ratio.svg">SVG图片源码</a></p>
+
+<h3 id="指定一个维度的尺寸，有固定比例">指定一个维度的尺寸，有固定比例</h3>
+
+<p>这个图片指定了 100px 的高但没有宽。 同时指定了一个 3:4 的比例，除非是故意放大到不成比例的尺寸（也就是说，通过显式指定宽度和高度到不是这个比例）</p>
+
+<p><img alt="100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5857/=100px-height-3x4-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5862/=100px-height-3x4-ratio.svg" title="100px-height-3x4-ratio.svg">SVG图片源码</a></p>
+
+<h3 id="无宽高，有固定比例">无宽高，有固定比例</h3>
+
+<p>这个图片既没有指定高度也没有指定宽度。它指定的是 1:1 的固定比例。就像软件的图标一样。它总是保持正方形，而且可以用于任何尺寸，例如  32x32，128x128，和 512x512。</p>
+
+<p><img alt="no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5859/=no-dimensions-1x1-ratio.png"></p>
+
+<p><a href="/@api/deki/files/5861/=no-dimensions-1x1-ratio.svg" title="no-dimensions-1x1-ratio.svg">SVG图片源码</a></p>
+
+<h2 id="缩放示例">缩放示例</h2>
+
+<p>现在让我们来看看这些图片在各种缩放情景下怎么展现。以下例子都是宽 300 高 200 像素的矩形。此外， {{ cssxref("background-repeat") }} 都设为了 no-repeat ，以便看得出来缩放的情况。</p>
+
+<div class="note"><strong>注意:</strong> 以下截屏只表达 <strong>符合预期的</strong> 渲染效果。目前不是所有的浏览器都能正确的渲染这些代码。</div>
+
+<h3 id="两个维度都指定尺寸">两个维度都指定尺寸</h3>
+
+<p>如果你使用 {{ cssxref("background-size") }} 指定了两条边的长度， those lengths are always used, per rule 1 above. In other words, the image will always get stretched to the dimensions you specify, regardless of whether or not the source image has specified its dimensions and/or aspect ratio.</p>
+
+<h4 id="Source_No_dimensions_or_intrinsic_ratio">Source: No dimensions or intrinsic ratio</h4>
+
+<p>Given this CSS:</p>
+
+<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
+background-size: 125px 175px;
+</pre>
+
+<p>The rendered output would look like this:</p>
+
+<p><img alt="fixed-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5868/=fixed-no-dimensions-or-ratio.png"></p>
+
+<h4 id="Source_One_specified_dimension_no_intrinsic_ratio">Source: One specified dimension, no intrinsic ratio</h4>
+
+<p>Given this CSS:</p>
+
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 250px 150px;
+</pre>
+
+<p>The rendered output would look like this:</p>
+
+<p><img alt="fixed-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5866/=fixed-100px-wide-no-height-or-ratio.png"></p>
+
+<h4 id="Source_One_specified_dimension_with_intrinsic_ratio">Source: One specified dimension with intrinsic ratio</h4>
+
+<p>Given this CSS:</p>
+
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+background-size: 275px 125px;
+</pre>
+
+<p>The rendered output would look like this:</p>
+
+<p><img alt="fixed-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5865/=fixed-100px-height-3x4-ratio.png"></p>
+
+<h4 id="Source_No_specified_width_or_height_with_intrinsic_ratio">Source: No specified width or height with intrinsic ratio</h4>
+
+<p>Given this CSS:</p>
+
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+background-size: 250px 100px;
+</pre>
+
+<p>The rendered output would look like this:</p>
+
+<p><img alt="fixed-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5867/=fixed-no-dimensions-1x1-ratio.png"></p>
+
+<h3 id="使用_contain_或者_cover">使用 contain 或者 cover</h3>
+
+<p>当 {{ cssxref("background-size") }} 指定为 <code>cover</code> 时，图片能多小就多小，只要依然能覆盖整个背景区域。而指定为 <code>contain</code> 则会使得图片能多大就多大，只要不被背景裁切就好。</p>
+
+<p>For an image with an intrinsic ratio, exactly one size matches the <code>cover</code>/fit criteria alone. But if there is no intrinsic ratio specified, <code>cover</code>/fit isn't sufficient, so the large/small constraints choose the resulting size.</p>
+
+<h4 id="Source_No_dimensions_or_intrinsic_ratio_2">Source: No dimensions or intrinsic ratio</h4>
+
+<p>If an image doesn't specify either dimensions or an intrinsic ratio, neither rule 2 nor rule 3 apply, so rule 4 takes over: the background image is rendered covering the entire background area. This satisfies the largest-or-smallest constraint.</p>
+
+<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="no-dimensions-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5874/=no-dimensions-or-ratio-contain.png"></p>
+
+<h4 id="Source_One_specified_dimension_no_intrinsic_ratio_2">Source: One specified dimension, no intrinsic ratio</h4>
+
+<p>Similarly, if the image has one dimension specified but no intrinsic ratio, rule 4 applies, and the image is scaled to cover the entire background area.</p>
+
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="100px-wide-no-height-or-ratio-contain.png" class="default internal" src="/@api/deki/files/5871/=100px-wide-no-height-or-ratio-contain.png"></p>
+
+<h4 id="Source_One_specified_dimension_with_intrinsic_ratio_2">Source: One specified dimension with intrinsic ratio</h4>
+
+<p>Things change when you specify an intrinsic ratio. In this case, rule 1 isn't relevant, so rule 2 is applied: we try to preserve any intrinsic ratio (while respecting <code>contain</code> or <code>cover</code>). For example, preserving a 3:4 intrinsic aspect ratio for a 300x200 box with <code>contain</code> means drawing a 150x200 background.</p>
+
+<h5 id="contain_case">contain case</h5>
+
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="100px-height-3x4-ratio-contain.png" class="default internal" src="/@api/deki/files/5869/=100px-height-3x4-ratio-contain.png"></p>
+
+<p>Notice how the entire image is rendered, fitting as best as possible into the box without clipping any of it away.</p>
+
+<h5 id="cover_case">cover case</h5>
+
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+background-size: cover;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="100px-height-3x4-ratio-cover.png" class="default internal" src="/@api/deki/files/5870/=100px-height-3x4-ratio-cover.png"></p>
+
+<p>Here, the 3:4 ratio is preserved while still stretching the image to fill the entire box. That causes the bottom of the image to be clipped away.</p>
+
+<h4 id="Source_No_dimensions_with_intrinsic_ratio">Source: No dimensions with intrinsic ratio</h4>
+
+<p>When using an image with no intrinsic dimensions but an intrinsic ratio, things work similarly.</p>
+
+<h5 id="contain_case_2">contain case</h5>
+
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+background-size: contain;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="no-dimensions-1x1-ratio-contain.png" class="default internal" src="/@api/deki/files/5872/=no-dimensions-1x1-ratio-contain.png"></p>
+
+<p>Notice that the image is sized to fit the smallest dimension while preserving the 1:1 aspect ratio.</p>
+
+<h5 id="cover_case_2">cover case</h5>
+
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+background-size: cover;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="no-dimensions-1x1-ratio-cover.png" class="default internal" src="/@api/deki/files/5873/=no-dimensions-1x1-ratio-cover.png"></p>
+
+<p>Here, the image is sized so that it fills the largest dimension. The 1:1 aspect ratio has been preserved, although with this source image, that can be difficult to see.</p>
+
+<h3 id="Automatic_sizing_using_auto_for_both_dimensions">Automatic sizing using "auto" for both dimensions</h3>
+
+<p>If {{ cssxref("background-size") }} is set to <code>auto</code> or <code>auto auto</code>, rule 2 says that rendering must preserve any intrinsic ratio that's provided.</p>
+
+<h4 id="Source_No_dimensions_or_intrinsic_ratio_3">Source: No dimensions or intrinsic ratio</h4>
+
+<p>When no intrinsic ratio or dimensions are specified by the source image, rule 4 takes effect, and the image is rendered to fill the background area.</p>
+
+<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5878/=auto-no-dimensions-or-ratio.png"></p>
+
+<h4 id="Source_One_dimension_and_no_intrinsic_ratio">Source: One dimension and no intrinsic ratio</h4>
+
+<p>If no intrinsic ratio is specified, but at least one dimension is specified, rule 3 takes effect, and we render the image obeying those dimensions.</p>
+
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="auto-100px-wide-no-height-or-ratio.png" class="default internal" src="/@api/deki/files/5876/=auto-100px-wide-no-height-or-ratio.png"></p>
+
+<p>Note here that the width, which is specified in the source SVG at 100 pixels, is obeyed, while the height fills the background area since it's not specified (either explicitly or by an intrinsic ratio).</p>
+
+<h4 id="Source_One_dimension_and_an_intrinsic_ratio">Source: One dimension and an intrinsic ratio</h4>
+
+<p>If we have an intrinsic ratio with a fixed dimension, that fixes both dimensions in place. Knowing one dimension and a ratio is, as has been mentioned already, the same as specifying both dimensions explicitly.</p>
+
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5875/=auto-100px-height-3x4-ratio.png"></p>
+
+<p>Since this image has an explicit 100 pixel height, the 3:4 ratio explicitly sets its width at 75 pixels, so that's how it's rendered in the <code>auto</code> case.</p>
+
+<h4 id="Source_No_fixed_dimensions_with_intrinsic_ratio">Source: No fixed dimensions with intrinsic ratio</h4>
+
+<p>When an intrinsic ratio is specified, but no dimensions, rule 4 is applied -- except that rule 2 also applies. The image is therefore rendered just like for the <code>contain</code> case.</p>
+
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+background-size: auto auto;
+</pre>
+
+<p>The rendered output looks like this:</p>
+
+<p><img alt="auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5877/=auto-no-dimensions-1x1-ratio.png"></p>
+
+<h3 id="Using_auto_and_one_specific_length">Using "auto" and one specific length</h3>
+
+<p>Given rule 1, specified dimensions are always used, so we need to use our rules only to determine the second dimension.</p>
+
+<h4 id="Source_No_dimensions_or_intrinsic_ratio_4">Source: No dimensions or intrinsic ratio</h4>
+
+<p>If the image has no dimensions or intrinsic ratio, rule 4 applies, and we use the background area's dimension to determine the value for the <code>auto</code> dimension.</p>
+
+<pre class="brush: css">background: url(no-dimensions-or-ratio.svg);
+background-size: auto 150px;
+</pre>
+
+<p><img alt="1auto-no-dimensions-or-ratio.png" class="default internal" src="/@api/deki/files/5881/=1auto-no-dimensions-or-ratio.png"></p>
+
+<p>Here, the width is determined using the background area's width per rule 4, while the height is the 140px specified in the CSS.</p>
+
+<h4 id="Source_One_specified_dimension_with_no_intrinsic_ratio">Source: One specified dimension with no intrinsic ratio</h4>
+
+<p>If the image has one specified dimension but no intrinsic ratio, that specified dimension is used per rule 3 if that dimension is set to <code>auto</code> in the CSS.</p>
+
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: 200px auto;
+</pre>
+
+<p><img alt="100px-wide-no-height-or-ratio-length-auto.png" class="default internal" src="/@api/deki/files/5883/=100px-wide-no-height-or-ratio-length-auto.png"></p>
+
+<p>Here, the 200px specified in the CSS overrides the 100px width specified in the SVG, per rule 1. Since there's no intrinsic ratio or height provided, <code>auto</code> selects the height of the background area as the height for the rendered image.</p>
+
+<pre class="brush: css">background: url(100px-wide-no-height-or-ratio.svg);
+background-size: auto 125px;
+</pre>
+
+<p><img alt="100px-wide-no-height-or-ratio-auto-length.png" class="default internal" src="/@api/deki/files/5882/=100px-wide-no-height-or-ratio-auto-length.png"></p>
+
+<p>In this case, the width is specified as auto in the CSS, so the 100px width specified in the SVG is selected, per rule 3. The height is set at 125px in the CSS, so that is selected per rule 1.</p>
+
+<h4 id="Source_One_specified_dimension_with_intrinsic_ratio_3">Source: One specified dimension with intrinsic ratio</h4>
+
+<p>When a dimension is specified, rule 1 applies that dimension from the SVG to the rendered background unless specifically overridden by the CSS. When an intrinsic ratio is also specified, that's used to determine the other dimension.</p>
+
+<pre class="brush: css">background: url(100px-height-3x4-ratio.svg);
+background-size: 150px auto;
+</pre>
+
+<p><img alt="1auto-100px-height-3x4-ratio.png" class="default internal" src="/@api/deki/files/5879/=1auto-100px-height-3x4-ratio.png"></p>
+
+<p>In this case, we've overridden the height of the image in the CSS to be 150px, so rule 1 is applied. The intrinsic 3:4 aspect ratio then determines the width for the <code>auto</code> case.</p>
+
+<h4 id="Source_No_specified_dimensions_with_intrinsic_ratio">Source: No specified dimensions with intrinsic ratio</h4>
+
+<p>If no dimensions are specified in the SVG, the specified dimension in the CSS is applied, then the intrinsic ratio is used to select the other dimension, per rule 2.</p>
+
+<pre class="brush: css">background: url(no-dimensions-1x1-ratio.svg);
+background-size: 150px auto;
+</pre>
+
+<p><img alt="1auto-no-dimensions-1x1-ratio.png" class="default internal" src="/@api/deki/files/5880/=1auto-no-dimensions-1x1-ratio.png"></p>
+
+<p>The width is set by the CSS to 150px. The <code>auto</code> value for the height is computed using that width and the 1:1 aspect ratio to be 150px as well, resulting in the image above.</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li>{{cssxref("background-size")}}</li>
+ <li>Blog post: <a class="external" href="http://whereswalden.com/2011/10/21/properly-resizing-vector-image-backgrounds/" title="http://whereswalden.com/2011/10/21/properly-resizing-vector-image-backgrounds/">Properly resizing vector image backgrounds</a></li>
+</ul>