使用<iframe>确立新视窗

代表SVG文件的iframe要素创立新坐标系的意况好像于上述解释的image要素的情事。iframe要素也能够有x,y,width和height质量，除了它本人的preserveAspectratio之外。

发端坐标系

初始视窗坐标系是四个身无寸铁在视窗上的坐标系。原点(0,0)在视窗的左上角，X轴正向指向右，Y轴正向指向下，先河坐标系中的四个单位等于视窗中的三个”像素”。那几个坐标种类类似于经过CSS盒模型在HTML成分上建设构造的坐标系。

初始客商坐标系是创建在SVG画布上的坐标系。这几个坐标系一开首和视窗坐标系完全同样-它本身的原点位于视窗左上角，x轴正向指向右，y轴正向指向下。使用viewBox个性，初始顾客坐标连串-也称时下坐标系，或行使中的客户空间-可以形成与视窗坐标系区别样的坐标系。大家在一下节中斟酌怎么着改换坐标系。

到后天寿终正寝，大家还并没有注解viewBox属性值。SVG画布的顾客坐标连串和视窗坐标连串完全一致。

下图中，视窗坐标系的”标尺”是墨深褐的，顾客坐标系（viewBox）的是杏黄的。由于它们在今年完全同样，所以多少个坐标种类重合了。

上边SVG中的鹦鹉的外框边界是200个单位（那几个例子中是200个像素）宽和300个单位高。鹦鹉基于早先坐标系在画布中绘制。

新客商空间（即，新当前坐标系）也得以因而在容器成分或图片成分上使用transform质量来声称调换。大家将要那篇小说的第二某个座谈有关转变的剧情，越来越多细节在第四局地和最后部分中商讨。

使用<use>ing <symbol>创造多少个新的视窗

symbol要素会定义新视窗，无论它如几时候被use要素实例化。

symbol要素的采取能够参见use要素中的xlink:href属性：

XHTML

<svg> <symbol id=”my-symbol” viewBox=”0 0 300 200″> <!–
contents of the symbol –> <!– this content is only rendered when
`use`d –> </symbol> <use xlink:href=”#my-symbol” x=”?”
y=”?” width=”?” height=”?”> </svg>

1 2 3 4 5 6 7

<svg>     <symbol id="my-symbol" viewBox="0 0 300 200">         <!– contents of the symbol –>         <!– this content is only rendered when `use`d –>     </symbol>     <use xlink:href="#my-symbol" x="?" y="?" width="?" height="?"> </svg>

地点值中的问号表示那几个值大概未有证明-假使x和y从未有过注明，暗中认可值为0，也没有须求证明宽高。

看样子了吧，当您use一个symbol要素，然后利用开垦工具检查DOM，你不会看出use标签中symbol的剧情。因为use的源委在shadow
tree里被渲染，就算您在开垦工具中允许shadow DOM展现你就能够观看。

当symbol被选拔时，它被深度克隆到变化的shadow
tree中，例外是symbol被svg轮换。那一个变化的svg连天有醒指标宽高。如果宽高的值在use要素上，这个值会被转变生成svg。若是属性宽和/或高未有注解，生成的svg要素会接纳这个值的百分之百。

因为我们在DOM中应用了svg，而且因为这些svg实质上满含在外层svg中，大家碰着的嵌套svg的景观和我们在前头一章钻探到的并不曾稍微不一样-嵌套的svg变异了二个新的viewport。嵌套svg的viewBox是在symbol要素上表明的viewBox。（symbol要素接受viewBox成分值。更加多消息，阅读那篇小说：Structuring,
Grouping, and Referencing in SVG –
The , , and Elements)

由此大家后天有了三个新的viewport，尺寸和岗位能够动用要素（x,y, width, height）声明，viewBox值能够在symbol要素上宣示。symbol的剧情随后再那个视窗和viewBox中被渲染和固化。

最后，symbol要素也接到preserveAspectratio属性值，你能够在由use确立的新视窗中定位viewBox。那很驾驭，不是啊？你能够像大家在后边的一些里一样调节新创设的嵌套svg。

Dirk
Weber 也开创了三个行使嵌套SVG和symbol要从来模拟CSS
border
images的变现。你能够在这里翻看小说。

xMaxYMax

• 强制统一缩放。
• 视窗X轴的最大值对齐成分的viewBox的 <min-x>+<width>。
• 视窗Y轴的最大值对齐成分的viewBox的 <min-y>+<height>。
• 把那一个类比为backrgound-position: 100% 100%;。

故而，通过应用preserveAspectRatio属性的align和meetOrSlice值，你能够证明是或不是合併缩放viewBox，是或不是和视窗对齐，在视窗中是不是整个可知。

有时候，取决于viewBox的尺寸，一些值或许会促成相似的结果，比如在原先viewBox="0 0 200 300"的事例中，一些对齐完全用了不一致的align值。那时候将要设置meetOrSlice的值为meet来保证viewBox包含在viewport内。

假诺大家把meetOrSlice的值改成slice，分裂的值大家将获得区别的结果。注意viewBox是什么样拉伸来覆盖全部视窗的。x轴被拉伸到用200单位来遮掩视窗800单位。为了达到这么些指标，並且维持viewBox的宽高比，y轴在底层被“裁切”，不过你能够想像它在视窗中中度上的延长。

当然，不同的viewBox值看起来分化于大家那边用的200*300。为了保全简洁，大家不再列举越来越多的事例，你能够看本人制造的片段互为演示来支持您更加好地形象化通晓viewBox和preserveAspectRatio在区别值下的效果。你能够在一下节中查阅互动演示例子的链接。

而是在那前面，作者想要提醒您放在心上如若<min-x> 和 <min-y>值改变，那么mid-x, mid-y, max-x,
和 max-y的值也会爆发改换。你可以在竞相演示中更改那个值来查看轴以及相关联的viewBox的对齐格局的改造。

下边图片展现了定位轴的岗位为viewBox = "100 0 200 300"时的服从。和在此之前用同样的例子，可是我们把<min-x>的值设为100并不是此前的0。你能够设置成任何你想要的值。注意min-x, mid-x,
和 max-x轴是何许变迁的。这里运用的preserveAspectRatio值为私下认可的xMinYMin meet，意味着mid-*轴和视窗轴的中级对齐。

例子

试想大家有如下的SVG：

上述SVG是响应式的。改换荧屏的尺码会导致整个SVG图形依照要求做出反应。上面包车型地铁截图突显了拉伸页面的结果，以及SVG如何变得越来越小。注意SVG的从头到尾的经过什么依照SVG视窗和相互保持它们的开首地方。

动用嵌套SVG，我们将转移那个情状。大家可以对SVG中种种独立的元素根据SVG视窗声澳优个地点，所以趁着SVG
视窗尺寸的更换（即最外层svg的转移），各样元素独立于任何因素爆发变动。

注意，在那一年，你须求熟知SVG viewport, viewBox,
和preserveAspectRatio是怎么生效的。

俺们就要创造叁个作用，当显示屏尺寸变化时，蛋壳的上部分移动使得个中的喜人的小鸡突显出来，如下图所示：

为了完结那些作用，蛋的上半局地必需和另外界分分离出来单独包涵三个团结的svg。这个svg带有框会有多少个IDupper-shell。

然后，大家保险新的svg#upper-shell和外围SVG有同等的惊人和幅度。能够因此在svg上声明width="100%"``height="100%"抑或不注脚任何中度和幅度来完结。假若内层SVG上从没有过评释任何宽高，它会自行增添为外层SVG宽高的100%。

聊起底，为了确定保障上壳被“抬”起或一定在svg#upper-shell最上部的骨干，大家将利用十分的preserveAspectRatio值来确定保障viewBox被一定在视窗的最上部中央-值是xMidYMin。

SVG图形的代码如下：

XHTML

<svg version=”1.1″ xmlns=””
xmlns:xlink=”; <!– … –>
<svg viewBox=”0 0 315 385″ preserveAspectRatio=”xMidYMid meet”>
<!– the chicken illustration –> <g id=”chicken”> <!–
… –> </g> <!– path forming the lower shell –>
<path id=”lower-shell” fill=”url(#gradient)” stroke=”#000000″
stroke-width=”1.5003″ d=”…”/> </svg> <svg id=”upper-shell”
viewBox=”0 0 315 385″ preserveAspectRatio=”xMidYMin meet”> <!–
path forming the upper shell –> <path id=”the-upper-shell”
fill=”url(#gradient)” stroke=”#000000″ stroke-width=”1.5003″
d=”…”/> </svg> </svg>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">     <!– … –>     <svg viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">         <!– the chicken illustration –>         <g id="chicken">             <!– … –>         </g>         <!– path forming the lower shell –>         <path id="lower-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="…"/>     </svg>       <svg id="upper-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMin meet">         <!– path forming the upper shell –>         <path id="the-upper-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="…"/>     </svg> </svg>

其有的时候候，注意在嵌套svg#upper-shell上评释的viewBox和最外层svg有平等的值（在它被移除以前）。大家用一样的viewBox值小编原因正是那般，SVG在大显示屏上保险最早的范例。

为此，那件事是这么的：大家起首三个SVG-在大家的例证中，那是一张里面藏着一个小鸡的带裂纹的蛋。然后，我们创制了另一“层”并把上有个别的壳放在里面-这一层通过动用嵌套svg创建。嵌套svg和外层svg的尺寸和viewBox无差别于。最后，内层SVG的view博克斯被设置成不管显示屏尺寸是稍稍都“固定”在viewport的最上部-那确定保证了当荧屏尺寸很窄时SVG被拉开，上层的壳被升高举起，因而显示出“遮掩”在里边的小鸡。

比如荧屏尺寸拉伸，SVG被扩大，使用preserveAspectratio="xMidYMin meet"把带有上一些壳的view博克斯被定位到viewport的最上端。

点击上面开关来查阅在线SVG。记住退换显示屏尺寸再看SVG变化。

在线案例

嵌套或”分层”SVG使您能够依附改换的视窗定位SVG的一片段，在维系成分宽高比的情景下。所以图片能够在不扭转内容成分的动静下自适应。

一经我们想要整个鸡蛋剥离突显出小鸡，大家能够单独用四个svg层包涵下一些壳，viewBox也长久以来。确认保证下有个别壳向下移动并一定在视窗的最底层中央，大家选取preserveAspectRatio="xMidYMax meet"来牢固。代码如下：

XHTML

<svg version=”1.1″ xmlns=””
xmlns:xlink=”; <svg id=”chick”
viewBox=”0 0 315 385″ preserveAspectRatio=”xMidYMid meet”> <!–
the chicken illustration –> <g id=”chick”> <!– … –>
</g> </svg> <svg id=”upper-shell” viewBox=”0 0 315 385″
preserveAspectRatio=”xMidYMid meet”> <!– path forming the upper
shell –> <path id=”the-upper-shell” fill=”url(#gradient)”
stroke=”#000000″ stroke-width=”1.5003″ d=”…”/> </svg>
<svg id=”lower-shell” viewBox=”0 0 315 385″
preserveAspectRatio=”xMidYMax meet”> <!– path forming the lower
shell –> <path id=”the-lower-shell” fill=”url(#gradient)”
stroke=”#000000″ stroke-width=”1.5003″ d=”…”/> </svg>
</svg>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">     <svg id="chick" viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">         <!– the chicken illustration –>         <g id="chick">             <!– … –>         </g>     </svg>       <svg id="upper-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMid meet">         <!– path forming the upper shell –>         <path id="the-upper-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="…"/>     </svg>       <svg id="lower-shell" viewBox="0 0 315 385" preserveAspectRatio="xMidYMax meet">         <!– path forming the lower shell –>         <path id="the-lower-shell" fill="url(#gradient)" stroke="#000000" stroke-width="1.5003" d="…"/>     </svg> </svg>

每个svg层/viewport等于最外层svg宽高的百分百。所以大家基本有了四个别本。每层包含贰个要素-上一些壳，下部分壳，或小鸡。三层的viewBox是均等的，唯有preserveAspectRatio不同。

理之当然，在那么些事例里，一齐初的图形中型迷你鸡掩饰在蛋里，随着荧屏变小才显得出来。可是，你能够做一些不相同样的：你能够起来在小显示器上开创二个图纸，然后在大显示屏上展现一些东西；即当svg变宽时才有越多垂直空间来显示有分。

你能够更有创立性，依据不一样显示器尺寸来体现和掩饰成分-使用媒体询问-把新因素通过一定措施固定来完毕一定的效力。想象力是不断。

同期注意嵌套svg无需和容器svg有同等的宽高；你能够声明宽高何况限定svg内容，高出边界裁切-那都有赖于你想要到达什么成效。

掌握SVG坐标系和调换：视窗,viewBox和preserveAspectRatio

2015/09/23 · HTML5 ·
SVG

初稿出处：
SaraSoueidan   译文出处：Blueed（@Ivan_z3）   

SVG成分不像HTML成分同样由CSS盒模型管理。那使得大家得以更进一竿灵活定位和转移那个成分-只怕一眼看上去不太直观。可是，一旦你通晓了SVG坐标系和调换，操纵SVG会特别轻松而且很有含义。本篇小说中大家将研讨决定SVG坐标系的最入眼的四个属性：viewport， viewBox，
和 preserveAspectRatio。

那是本类别三篇小说中的第一篇，那篇小说研商SVG中的坐标系和更动。

• 了然SVG坐标系和改换（第一有的）-viewport，viewBox，和preserveAspectRatio
• 领悟SVG坐标系和更改（第二部分）-transform属性
• 知道SVG坐标系和改动（第四局地）-创立新视窗

为了使文中的剧情和分解更形象化，作者创造了贰个互动演示，你能够自由改换viewBox 和 preserveAspectRatio的值。

在线案例

其一例子只是不可缺少内容的一小部分，所以看完请重回继续读书那篇文章

清楚SVG坐标种类和改换： 构造建设新视窗

2015/09/23 · HTML5 ·
SVG

最先的小说出处：
SaraSoueidan   译文出处：Blueed@Ivan_z3   

在SVG绘制的其余八个整天，你能够经过嵌套<svg>照旧应用诸如<symbol>的因一向创设新的viewport和客户坐标系。在那篇小说中，大家将看一下我们怎么着那样做，以及那样做什么帮助大家决定SVG元素并让它们变得越来越灵活（或流动）。

这是SVG坐标系和更改类别的第三篇也是最后一篇小说。在率先篇中，包罗了任何要精通SVG坐标体系基础的须要掌握的内容；更实际的是，
SVG
viewport, viewBox和 preserveAspectRatio属性。在第二篇著作里，你能够领悟到任何你须求了然的关于SVG系统调换的剧情。

• 知道SVG坐标系和退换（第一有的）-viewport，viewBox，和preserveAspectRatio
• 明亮SVG坐标系和改动（第二部分）-transform属性
• 精晓SVG坐标系和改变（第2盘部）-建构新视窗

通过那篇小说，自己一旦你早就读了这几个体系的首先局地关于SVG
viewport, viewBox 和 preserveAspectRatio 属性的内容。在翻阅那篇小说在此以前你没有须要读第二篇有关坐标系调换的内容。

xMinYMax

• 强制统一缩放。
• 视窗X轴的最小值对齐元素viewBox的<min-x>。
• 视窗X轴的最大值对齐成分的viewBox的<min-y>+<height>。
• 把那么些类比为backrgound-position: 0% 100%;。

参考<image>中的SVG image创建三个新视窗

images要素证明整个文件的从头到尾的经过被渲染到三个当下客商坐标系中加以的星型。image要素得以表示图片文件比方PNG或JPEG或许有”image/svg+xml”的MIME类型的文书。

代表SVG文件的image要素会变成创设二个一时半刻新视窗因为定义相关财富有svg元素。

XHTML

<image xlink:href=”myGraphic.svg” x=”?” y=”?” width=”?” height=”?”
preserveAspectRatio=”?” />

1	<image xlink:href="myGraphic.svg" x="?" y="?" width="?" height="?" preserveAspectRatio="?" />

<image>要素接收好多品质，当中部分属性-和那篇作品有关的-是x和y岗位属性，width和height属性以及preserveAspectratio。

普普通通，SVG文件会包括三个根<svg>要素；那一个因素大概注解地方和尺寸，其他也会有viewBox和preserveAspectratio值。

当一个image要素代表SVG图片文件，根svg的x，y，width和height属性被忽视。除非image要素上的preserveAspectRatio值以“defer”伊始，根成分上的preserveAspectRatio值在代表SVG图片时也被忽略。然则相关image要素上的preserveAspectRatio属性定义SVG图片内容什么适应视窗。

评估被参谋情节定义的preserveAspectRatio天性时利用viewBox属性值。对于明明概念的viewBox内容（举个例子，最外层成分上有viewBox个性的SVG文件）值应该被应用。对于大多数值（PING,JPEG），图片边界应该被利用（即image要素有隐含的尺寸为’0
0 raster-image-width
raster-image-height’的viewBox）。假设值不全的话（比如，外层的svg成分没有viewbox属性的SVG文件）preserveAspectRatio值被忽略，唯有视窗x & y属性引起的运动才用来呈现内容。

举个例子说，倘诺几个image元素代表PNG或JPEG何况preserveAspectRatio="xMinYMin meet"，那么栅格的宽高比会保持，栅格会在确定保障整个栅格适应视窗的动静下尽大概放大尺寸，栅格的左上角会和由image元素上x,y,width和height概念的视窗的左上角对齐。

如果preserveAspectRatio的值是“none”那么图片的宽高比不会维持不变。图片会自适应，栅格的左上角和坐标系（x,y）完全对齐，栅格的右下角和坐标系(x+width, y+height)完全对齐。

视窗

视窗是一块SVG可见的区域。你能够把视窗当作一个窗户，透过那些窗户能够观望特定的光景，景色恐怕完全，恐怕唯有一点。

SVG的视窗类似访问当前页面包车型客车浏览器视窗。网页能够是任何尺寸；它能够当先视窗宽度，并且在相当多情景下都比视窗中度要高。但是，种种时刻独有一部分网页内容是透过视窗可知的。

漫天SVG画布可见照旧有个别可知决议于那些canvas的尺码以及preserveAspectRatio属性值。你以后没有须要操心那个；大家今后会切磋越来越多的细节。

你能够在最外层<svg>要素上运用width和height属性表明视窗尺寸。

<!– the viewport will be 800px by 600px –> <svg width=”800″
height=”600″> <!– SVG content drawn onto the SVG canvas –>
</svg>

1 2 3 4

<!– the viewport will be 800px by 600px –> <svg width="800" height="600">     <!– SVG content drawn onto the SVG canvas –> </svg>

在SVG中，值能够带单位也不得以不带。贰个不带单位的值能够在客户空间中通过顾客单位声称。假如值通过客户单位声称，那么这么些值的数值被以为和px单位的数值同样。那意味上述例子将被渲染为800px*600px的视窗。

您也能够行使单位来证明值。SVG援助的尺寸单位有：em，ex，px，pt，pc，cm，mm，in和比重。

假定你设定最外层SVG成分的宽高，浏览器会建设构造起来视窗坐标系和起头客户坐标系。

动用嵌套SVG使成分流动

在保持宽高比的气象下稳固成分，我们得以应用嵌套svg只允许特定成分流动-能够不有限援助那一个特定成分的宽高比。

例如说，借使你只想SVG中的贰个成分流动，你能够把它包括在二个svg中，而且利用preserveAspectRatio="none"来让那么些成分扩张始终撑满这一个视窗的宽，况兼保持宽高比和像我们在事先例子中做的一样稳固其余因素。

XHTML

<svg> <!– … –> <svg viewBox=”..”
preserveAspectRatio=”none”> <!– this content will be fluid –>
</svg> <svg viewBox=”..” preserveAspectRatio=”..”> <!–
content positioned somewhere in the viewport –> </svg> <!–
… –> </svg>

1 2 3 4 5 6 7 8 9 10

<svg>     <!– … –>     <svg viewBox=".." preserveAspectRatio="none">         <!– this content will be fluid –>     </svg>     <svg viewBox=".." preserveAspectRatio="..">         <!– content positioned somewhere in the viewport –>     </svg>     <!– … –> </svg>

Jake
Archibald创造了三个简便实用的嵌套SVG使用案例：贰个粗略的UI能够饱含定位在最外层svg角落的因素，并且维持宽高比，UI的中间部分浮动况兼依照svg宽度改动实行拉伸。你可以在这里翻开。确定保障您在开垦工具里检查代码来摘取和设想不一致viewbox和svg使用的功用。

xMidYMax

• 强制统一缩放。
• 视窗X轴的中间值对齐成分的viewBox的X轴中间值。
• 视窗Y轴的最大值对齐成分的viewBox的<min-y>+<height>。
• 把那么些类比为backrgound-position: 50% 100%;。

使用<foreignObject>创立新视窗

foreignObject要素创立二个新的viewport来渲染这几个成分的剧情。

foreignObject标签允许你把非SVG内容增多到SVG文件中。平日，foreignObject的剧情被认为不相同于命名空间。举例，你能够把一些HTML放到SVG成分的中游。

foreignObject收下属性包含x，y，height和width，用来定位目的和调治尺寸，成立用于显示它个中所引用的剧情的限量。

有须求有关foreignObject要素的要说因为它给内容创造了新的viewport。即使你感兴趣，能够查看MDN
entry或者在The
Nitty Gritty Blog上查看Christian
Schaeffer创建的骨子里应用例子。

xMinYMid

• 强制统一缩放。
• 视窗X轴的最小值对齐元素viewBox的<min-x>。
• 视窗Y轴的中档值来对齐成分的viewBox的中间值。
• 把那些类比为backrgound-position: 0% 50%;。

结束语

创立新的viewports和坐标系-像上述提到的等同通过嵌套svg和任何因素-允许你调节SVG的一对剧情而因此任何办法你也许没有办法一样调节。

在写那片小说以及思虑例子和动用情状的全套进程中，我平素在动脑筋嵌套SVG怎样让大家在拍卖SVG时能更加好调节并有越来越灵活的格局。自适应SVG能够经过简洁的代码创立，在SVG中可以创制独立于任何因素的流淌成分，用来模拟CSS
border images来在高分屏上定义背景。

你是或不是曾经在SVG中应用嵌套视窗来创建有趣的事例了吧？你能或无法相处越来越多有创新意识的例子吗？

那篇小说总括了“精晓SVG坐标系和转移”这几个连串。下一步，大家会研究动画，以至更加多！敬请期望，多谢您的开卷！

1 赞 1 收藏
评论

meet（默认值）

依据以下两条准侧尽可能缩放成分：

• 保持宽高比
• 整个viewBox在视窗中可见

在那几个情景下，假诺图形的宽高比不相符视窗，一些视窗会胜出viewBox的边界（即viewBox绘图的区域会低于视窗）。（在viewBox一节查看最终的例证。）在那么些地方下，viewBox的分界被含有在viewport中使得边界满意。

以此值类似于background-size: contain。背景图片在维持宽高比的情景下尽只怕缩放并确定保证它切合背景绘制区域。假设背景的长度宽度比和接纳的要素的长度宽度比不等同，部分背景绘制区域会并未有背景图片覆盖。

嵌套<svg>元素

在先是有的我们探讨了<svg>要素怎么样为SVG画布内容建构贰个视窗。在SVG绘制进程中的任何多个天天，你能够创造一个新的视窗个中积存的图纸是因而把贰个<svg>要素包罗在另四个中绘制的。通过确立新视窗，你隐性得建设构造了二个新视窗坐标系和新客商坐标系。

举例说，试想有叁个<svg>以及中间的剧情：

XHTML

<svg xmlns=””
xmlns:xlink=”; <!– some SVG content
–> <svg> <!– some inner SVG content –> </svg>
<svg>

1 2 3 4 5 6

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">     <!– some SVG content –>     <svg>         <!– some inner SVG content –>     </svg> <svg>

 

先是件要求静心的是内容<svg>要素无需声美素佳儿（Friso）个命名空间xmlns因为暗许和外围<svg>的命名空间一样。当然，假若在HTML5文书档案中外层<svg>也没有须要命名空间。

您可以采纳叁个嵌套的SVG来把成分结合在共同然后在父SVG中一定它们。现在，你也足以把成分结合在一道同有的时候间使用组<g>来恒定-通过把元素包括在一组<g>元素中。你可以使用transform属性在画布中稳定它们。然则，使用<svg>自然好过使用<g>。使用x和y坐标来牢固，在广大情形下，比接纳调换特别便利。别的，<svg>要素接受宽高值，<g>不行。那代表，<svg>只怕并必要的，因为它能够创设三个新的viewport和坐标系，你能够无需也不想要。

通过给<svg>声称宽高值，你把内容限制在通过x,y,width和height品质定义的viewport的境界。任伊哈洛过界限的内容会被裁切。

只要您不注解x和y属性，它们默许是0。假如你不评释height和width属性，<svg>会是父SVG宽度和中度的百分百。

别的，申明客商坐标系并不是暗许的也会影响内部<svg>的内容。

给<svg>内的要素百分比率的扬言会基于<svg>总括，并非外围<svg>。比方，上面包车型地铁代码会产生内层SVG等于400单位，里面包车型客车圆锥形是200个单位：

XHTML

<svg width=”800″ height=”600″> <svg width=”50%” ..> <rect
width=”50%” … /> </svg> </svg>

1 2 3 4 5

<svg width="800" height="600">     <svg width="50%" ..>         <rect width="50%" … />     </svg> </svg>

 

要是最外层<svg>的增长幅度为百分之百（举例，借使它在叁个文档中内联或许你想要它能够流动），内层SVG会扩大拉伸来保持大幅度为外层SVG的一半-那是抑低的。

嵌套SVG在给SVG画布中的成分扩大灵活性和扩大性时进一步有用。大家通晓，使用viewBox值和preserveAspectRatio，大家曾经能够创设响应式SVG。最外层<svg>的宽度能够设置成百分之百来确定保证它扩大拉伸到它的容器（或页面）扩大或拉伸。然后通过使用viewBox值和
preserveAspectRatio，大家得以确认保障SVG画布能够自适应viewport中的退换（最外层svg）。小编在CSSConf解说的幻灯片中写到了有关响应式SVG的源委。你能够在这里查看这一个技术。

而是，当大家像那样创设二个响应式SVG，整个画布以及具备绘制在上头的成分都会有反应何况相同的时候改动。但有时，你只想让图形中的贰个要素变为响应式，何况保持别的东西“固定”在八个职务和/或尺寸。那时候嵌套svg就很有用。

svg要素有独立于它父成分的坐标系，它能够有单独的viewBox和preserveAspectRatio质量，你能够Infiniti制修改里面内容的尺寸和地方。

进而，要让三个因素尤为灵活，大家得以把它包裹在<svg>元素中，并且给svg叁个弹性的上涨的幅度来适应最外层SVG的拉长率，然后证明preserveAspectRatio="none"那样的话里面包车型客车图纸会增添和拉伸到容器的宽窄。注意svg能够多层嵌套，不过为了让事情简洁，作者在这篇小说里只嵌套一层深度。

为了演示嵌套svg怎么着发挥功效，让大家来看一些例证。

preserveAspectRatio属性

preserveAspectRatio属性强制统一缩放比来保持图形的宽高比。

假使您用差异于视窗的宽高比定义顾客坐标系，借使像我们在之前的例子中看到的那样浏览器拉伸viewBox来适应视窗，宽高比的两样会形成图形在某个方向上扭转。所以即便上一个例子中的viewBox被拉伸以在颇负矛头上适应视窗，图形看起来如下：

当给viewBox设置0 0 200 300的值时扭曲显而易见（显明那特不优秀），那几个值小于视窗尺寸。笔者蓄意选用那个尺寸进而让viewBox特别鹦鹉边界盒子的尺码。如果浏览器拉伸图像来适应整个视窗，看起来会像下边那样：

preserveAspectRatio属性令你能够在维系宽高比的情况下强制统一viewBox的缩放比，并且只要不想用暗许居中你能够注明viewBox在视窗中的地点。

别的创立新视窗的章程

svg不是独步天下能在SVG中开立异视窗的要素。在下边部分，我们议和谈使用任何SVG元素创制新视窗的方法。

viewBox

本人欢畅把viewBox清楚为“真实”坐标系。首先，它是用来把SVG图形绘制到画布上的坐标系。那几个坐标系能够高于视窗也足以低于视窗，在视窗中得以完整可知或部分可知。

在事先的章节里，这几个坐标系-顾客坐标系-和视窗坐标系完全平等。因为大家从不把它评释成别的坐标系。那正是为啥全数的恒久和制图看起来是基于视窗坐标系的。因为大家借使制造视窗坐标系（使用width和height），浏览器私下认可成立二个完全同样的客商坐标系。

你能够运用viewBox属性评释自个儿的客商坐标系。若是您选取的客商坐标种类和视窗坐标种类宽高比（高比宽）同样，它会延伸来适应整个视窗区域（一分钟内大家就来说个例子）。可是，倘若您的客商坐标系宽高比分歧，你能够用preserveAspectRatio质量来声称整个体系在视窗内是不是可知，你也得以用它来声称在视窗中哪些定位。大家会在下个章节里研究这一动静的细节和例子。在这一章里，大家只谈谈viewBox的宽高比相符视窗的事态-在那几个事例中，preserveAspectRatio不产生潜移暗化。

在我们研讨那几个事例前，大家想起一下viewBox的语法。

xMinYMin

• 强制统一缩放
• 视窗X轴的最小值对齐成分viewBox的<min-x>。
• 视窗Y轴的最小值对齐成分viewBox的<min-y>。
• 把那一个类比为backrgound-position: 0% 0%;。