svg嵌套svg
preserveAspectRatio
is the partner in crime of the SVG viewBox
.
preserveAspectRatio
是SVG viewBox
犯罪的合作伙伴。
If you do not understand the viewBox
just yet, then go check out my other article here explaining it.
如果您还不了解viewBox
,请在此处查看我的其他文章对其进行解释 。
preserveAspectRatio
gives us the ability to tell our graphic how to scale when the aspect ratio of the viewBox
and viewPort
are different. By default our preserveAspectRatio
will tell our image to scale to fit the viewPort
and to be centered. To explicitly set the default preserveAspectRatio
, we do the following:
当viewBox
和viewPort
的纵横比不同时, preserveAspectRatio
使我们能够告诉图形如何缩放。 默认情况下, preserveAspectRatio
会告诉我们图像缩放以适合viewPort
并居中。 要显式设置默认的preserveAspectRatio
,我们执行以下操作:
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
Let’s break this down a little so it’s not so scary looking!
让我们分解一下,这样看起来就不那么恐怖了!
xMidYMid
- center theviewBox
region within theviewPort
regionxMidYMid
将viewBox
区域viewPort
区域内meet
- scale our graphic until it meets the height and width of ourviewPort
meet
-扩展我们的图形,直到它符合我们的高度和宽度viewPort
Yikes! This is still pretty confusing, so let’s use an example to understand. We will use the famous Alligator.io
logo to help our understanding.
kes! 这仍然很令人困惑,所以让我们用一个例子来理解。 我们将使用著名的Alligator.io
徽标来帮助我们理解。
深入探究preserveAspectRatio (Delving into preserveAspectRatio)
The following is the markup for our SVG:
以下是我们的SVG的标记:
<svg width="100%" height="auto" viewBox="0 0 137 137" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<path d="M55.56 128.42a3.57 3.57 0 0 1-3.53-4.21c.03-.16 2.81-16.26-1.86-25.98-2.9-6.02-6.09-7.1-11.86-9.07-2.96-1-6.32-2.15-10.16-4.21-6.43-3.46-9.3-9.67-14.62-14.14C6.35 64.78-5.12 58.74 2.7 47.08c3.32-4.95 9.79-7.45 14.39-7.68a15 15 0 0 1 .73-.02c3.46 0 6.3 1.23 8.58 2.21 1.24.54 2.41 1.04 3.3 1.17.26.04.55.06.86.06.75 0 1.58-.1 2.46-.22 1.05-.14 2.22-.29 3.47-.29.88 0 1.7.07 2.5.23 1.25.23 2.54.47 3.65.47.46 0 .85-.04 1.18-.13.71-.17 1.46-.4 2.19-.64 1.35-.42 2.74-.85 4.29-1.12a11.69 11.69 0 0 1 3.67-.04c-3.42-2.46-6.18-5.5-5.1-9.09 1.29-4.32 6.91-4.82 11.04-4.82 2.1 0 4.53.15 7.23.46.52-4.97.67-13.19.67-13.27a3.6 3.6 0 0 1 2.13-3.21c.47-.21 4.91-2.08 13.6-2.08l2 .03c9.94.32 16.55 2.3 17.27 2.52.68.2 7.3 2.18 15.78 7.36 8.52 5.22 11.6 9.78 11.91 10.28.75 1.16.76 2.67.02 3.84-.5.79-4.58 7.32-6.75 11.51a53.62 53.62 0 0 1 8.14 4.94c1.42 1.09 5.74 4.4 4.49 8.61-1.06 3.55-5.04 4.52-8.7 4.76 1.75 4.74 1.65 9.3-.34 13.36l-.28.55c-1.01 2.05-1.12 2.26-.76 3.83.3 1.33.78 2.68 1.28 4.1.54 1.56 1.1 3.16 1.5 4.89l.26.95.02.08c.3 1.06.81 2.85 1.19 4.4.6 2.4 1.2 4.9-.94 6.5-.4.3-10.27 7.5-32.83 10.21-20.61 2.48-38.93 15.8-39.11 15.93-.63.46-1.36.7-2.13.7" fill="#FFFFFE"/>
<path d="M94.06 39.45c9.6 2.86 18.12 6.08 24.27 9a32.64 32.64 0 0 1 1.86-4.69c2.25-4.54 7.3-12.57 7.3-12.57s-2.72-4.23-10.77-9.16c-8.39-5.12-14.96-6.98-14.96-6.98s-6.51-2.06-16.34-2.37c-9.43-.3-14.03 1.74-14.03 1.74s-.17 9.48-.8 14.52c-.21 1.77-.59 3.42-.98 4.82 6.65.98 15.23 2.93 24.45 5.69" fill="#322549"/>
<path d="M132.97 57.14c-1.28 4.27-20.38 2.33-42.65-4.33-22.28-6.66-39.3-15.52-38.02-19.8 1.27-4.27 20.37-2.33 42.65 4.33 22.27 6.66 39.3 15.52 38.02 19.8" fill="#322549"/>
<path d="M121.36 54.91c-.72 2.42-14.43.45-30.6-4.4-16.19-4.83-28.72-10.7-28-13.11.71-2.41 14.42-.45 30.6 4.39s28.72 10.71 28 13.12" fill="#322549"/>
<path d="M64.58 37.85c-.54.23-1.06.49-1.56.8-2.73 1.72-4.12 4.6-5.8 7.22-2.09-.94-4.01-1.62-6.32-1.22-2.14.37-4.15 1.19-6.2 1.7-2.03.52-4.28.1-6.37-.3-3.2-.6-6.07.7-9.15.25-3.44-.49-7.02-3.57-11.9-3.33-4.15.22-9.23 2.57-11.6 6.1-2.28 3.4-2.18 11.1 2.82 12.21 2.2.5 3.8-.16 5.23 1.92 4.73 6.83 8.68 14.6 16.12 18.6 10.94 5.87 18.27 3.94 23.54 14.88 5.27 10.95 2.17 28.16 2.17 28.16s18.92-13.97 40.81-16.6c21.9-2.64 31.12-9.53 31.12-9.53.47-.35-1.73-7.56-1.88-8.26-.7-3.06-2.08-5.92-2.78-8.99-.7-3.04.02-4.12 1.31-6.76 2.28-4.64 1.09-9.59-1.4-13.89-2.25-3.9-5.7-7.3-9.94-8.94-7.53-2.9-10.14-3.41-10.14-3.41s-1.22-8.75-15.81-10.57c-5.42-.68-10.78-1.8-16.27-1.3-2 .18-4.11.48-6 1.26" fill="#322549"/>
<path d="M10.3 60.03s1.22 6.5 2.43 6.5c1.22 0 1.9-6.5 1.9-6.5H10.3" fill="#322549"/>
<path d="M17.03 49.9c-2.1.63-3.98.5-4.22-.3-.24-.8 1.26-1.96 3.35-2.59 2.1-.63 3.98-.5 4.22.3.24.8-1.26 1.96-3.35 2.59zm70.02 45.77c6.56-2.9 13.2-5.78 19.42-9.36 4.75-2.74 10.49-6.25 13.05-11.3 5.3-10.41-6.67-18.76-15.53-20.42-1.5-.28-12.81-1.72-13.23.85.41-2.54 3.22-3.68 4.56-5.64 2.12-3.07-.87-3.64-3.26-4.67-4.12-1.78-8.4-3.1-12.92-3.19-4.66-.08-8.55.45-12.05 3.88-.62.6-1.43 1.5-1.55 2.35-.35 2.51 4.67 3.29 6.1 2.4a28.4 28.4 0 0 1 10.78-3.73c2.48-.31 5.05-.44 7.46.32.65.21 1.35.46 1.91.85.06.04.48.45.52.45h-4.05s-2.43 3.82-8.1 5.44c-5.68 1.63-13.3-1.62-13.3-1.62s-5.56-2.64-10.58-1.99c-5.03.65-6.13 0-6.13 0v2.4s-2.43-1.63-5.27-2.4c-2.84-.77-6.9-2.67-11.96-1.84-5.07.84-6.09.18-10.75-1.84-4.66-2.01-9.68-1.43-12.57 3.68-2.89 5.12.81 8.4.81 8.4l4.22.11c.92-.06 1.84-.11 2.7-.1.29-1.77 1.12-5.6 3.08-6.55 2.56-1.24 1.36 3 1.63 5 .12.9.31 1.79.48 2.5 3.39 1.27 6.67 3.24 11.2 2.57 5.48-.82 11.36-4.61 16.63-1.7l.22.12c.51-1.15 1.76-3.67 3.03-4 1.66-.44.14 2.27-.13 3.7-.12.63-.2 1.26-.25 1.77.56.31 1.12.62 1.68.9.36-1.35 1.03-3.39 2.04-3.88 1.54-.74.57 2.21.59 3.66 0 .53.03 1.06.07 1.51 2.66 1.14 5.28 1.79 7.96 1.36 5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.5.2 5.88-.06 5.73-2.37.07 1.04.85 1.45.28 2.62-.43.9-1.45 1.45-2.35 1.75-2.72.94-4.85-.69-7.31-1.6-2.72-1.02-5.74-2.78-8.67-3.07-3.65-.37-8.52 2.06-13.38 1.25-4.87-.81-8.92-6.7-15.61-5.88-6.7.81-9.13 4.06-15 2.43-.91-.25-1.73-.52-2.49-.8-.05.2-.1.44-.14.72-.2 1.55.72 4.82-1.26 3.86-1.56-.76-2.2-4.6-2.4-6.2-2.23-1.01-4.22-1.83-7-1.83-.44 0-.85.02-1.25.05 1.63 2.74 5.84 9.4 10.89 14.15C32.7 80.27 39 80.46 39 80.46s-2.03-1.62-3.85-3.04c-1.83-1.42-4.46-5.92-4.46-5.92a64 64 0 0 0 10.94 7.34 501.7 501.7 0 0 0 13.59 6.9s-1.02-.2-3.45-.62c-2.43-.4-7.1-2.22-7.1-2.22s6.29 5.47 12.57 9.53c6.29 4.05 17.64 8.3 17.64 8.3s2.38-.74 12.17-5.06z" fill="#F5EA3C"/>
<path d="M72.96 31.3l-.12.62c6.56 1.51 13.7 3.4 21.13 5.65a324.6 324.6 0 0 1 22.61 7.71l.27-.63c-6.13-2.82-13.79-8.7-22-11.18-7.98-2.4-15.38-1.11-21.9-2.17M75.52 50.67s2.3 1.77 5.24 1.11c2.95-.64 5.25-2.82 5.25-2.82s-1.73-.32-3.92-.17c-.1.37-.21.78-.36 1.12-.35.78-1.2 1.19-1.2 1.19s-.24-.37-.41-1.34a2.78 2.78 0 0 1-.04-.7c-2.56.53-4.56 1.6-4.56 1.6M119.74 81.8s-5.31 4.91-17.9 10.61c-13.44 6.1-27.48 10.92-41.07 16.7l-.79 7.28s10.23-5.9 24.97-9.23c14.74-3.35 24.76-5.37 29.67-6.42a32.9 32.9 0 0 0 8.66-3.22l-3.54-15.72" fill="#FFFFFE"/><path d="M17.03 49.9c-2.1.63-3.98.5-4.22-.3-.24-.8 1.26-1.96 3.35-2.59 2.1-.63 3.98-.5 4.22.3.24.8-1.26 1.96-3.35 2.59zm89.44 36.4c4.75-2.73 10.49-6.24 13.05-11.29 5.3-10.41-6.67-18.76-15.53-20.42-1.5-.28-12.81-1.72-13.23.85.41-2.54 3.22-3.68 4.56-5.64 2.12-3.07-.87-3.64-3.26-4.67-4.12-1.78-8.4-3.1-12.92-3.19-4.66-.08-8.55.45-12.05 3.88-.62.6-1.43 1.5-1.55 2.35-.35 2.51 4.67 3.29 6.1 2.4a28.4 28.4 0 0 1 10.78-3.73c2.48-.31 5.05-.44 7.46.32.65.21 1.35.46 1.91.85.06.04.48.45.52.45h-4.05s-2.43 3.82-8.1 5.44c-5.68 1.63-13.3-1.62-13.3-1.62s-5.56-2.64-10.58-1.99c-5.03.65-6.13 0-6.13 0v2.4s-2.43-1.63-5.27-2.4c-2.84-.77-6.9-2.67-11.96-1.84-5.07.84-6.09.18-10.75-1.84-4.66-2.01-9.68-1.43-12.57 3.68-2.89 5.12.81 8.4.81 8.4l4.22.11c.92-.06 1.84-.11 2.7-.1.29-1.77 1.12-5.6 3.08-6.55 2.56-1.24 1.36 3 1.63 5 .12.9.31 1.79.48 2.5 3.39 1.27 6.67 3.24 11.2 2.57 5.48-.82 11.36-4.61 16.63-1.7l.22.12c.51-1.15 1.76-3.67 3.03-4 1.66-.44.14 2.27-.13 3.7-.12.63-.2 1.26-.25 1.77.56.31 1.12.62 1.68.9.36-1.35 1.03-3.39 2.04-3.88 1.54-.74.57 2.21.59 3.66 0 .53.03 1.06.07 1.51 2.66 1.14 5.28 1.79 7.96 1.36 5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.22.17 2.86.12 4-.4 1.71-.79.68-1.98-.89-1.89a3.02 3.02 0 0 1 2.4-1.4c3.41-.23 4.58 4.4 5.71 6.81 1.7 3.61 1.35 7.59-.5 11.07-5.6 10.49-22.03 17.44-22.03 17.44s2.38-.75 12.17-5.07c6.56-2.9 13.2-5.78 19.42-9.36z" fill="#409144"/>
<path d="M65.56 65.66c5.06-.81 5.83-3.02 13.58.14 2.27.92 4.68 2.99 7.05 3.31 1.02.14 3.38.06 4.73-.74l.44-.82c-1.63.37-5.75 1.02-7.92-1.01-2.75-2.58-4.64-4.2-11.54-3.26-5.73.8-9.33 1.01-14.3-1.4-.05.33-.08.65-.07.9 0 .54.03 1.07.07 1.52 2.66 1.14 5.28 1.79 7.96 1.36zm-9.92-4.83c-.43-.24-.87-.5-1.33-.8l-.66-.4a6.3 6.3 0 0 0-.18.7c-.12.64-.2 1.27-.25 1.78.56.31 1.12.62 1.68.9.17-.65.42-1.46.74-2.18zm-38.3-2.14c.09-.6.25-1.44.5-2.32-3.7-.64-7.19-.61-9.1-.53.5 1.81 1.67 2.85 1.67 2.85l4.22.11c.92-.06 1.84-.11 2.7-.1zm33.01 1.83l.22.12c.23-.52.62-1.33 1.1-2.09-5.17-2.49-8.23-1.34-12.39.25-4.82 1.86-8.34 2.23-15.58-.8a22 22 0 0 0-1.62-.6c.12.81.29 1.6.45 2.25 3.38 1.27 6.66 3.24 11.2 2.57 5.47-.82 11.35-4.61 16.62-1.7zM104 54.59c-1.25-.23-9.27-1.26-12.18-.13l-.18.07-.73.56a.92.92 0 0 0-.14.35c.01-.1.04-.19.06-.28L87.12 58s17.72-2.29 22.27 8.54c4.56 10.82-7.95 21.33-17.19 26.85 4.85-2.17 9.68-4.43 14.27-7.08 4.75-2.74 10.49-6.25 13.05-11.3 5.3-10.41-6.67-18.76-15.53-20.42zM69.9 50.92l-2.5-.45c.77.3 1.7.45 2.5.45zm.58 5.63c-2.59-1.2-5.03-3.69-6.46-5.33 1.7.52 2.83 1.06 2.83 1.06s7.63 3.24 13.3 1.62a16 16 0 0 0 1.97-.7l.05-.01c.16-.07.31-.13.48-.22l.06-.03c3.86-1.83 5.56-4.48 5.56-4.48h4.04s-1.34 4.69-7.24 7.48c-5.9 2.8-10.54 2.5-14.59.61z" fill="#317F3F"/>
<path d="M85.43 96.38l.15-.07-.15.07M75 100.7l-.05.01.04-.01M75.14 100.65c-.02 0-.03 0-.04.02l.04-.02M75.36 100.57l-.07.02.07-.02M30 65.52c8.31.75 12.91-1.93 16.1-1.68 3.2.26 3.72 3.2 12.15 4.6 8.44 1.41 11.8-2.17 16.2.13 3.34 1.75 6.7 3.77 10.4 4.72 1.1.28 2.71.5 4.23.35 2-.19 3.86-.99 4.19-3.06.26-1.7-.93-2.5-1.35-3.77.19.89.73 1.63.28 2.55-.43.9-1.45 1.45-2.35 1.75-2.72.94-4.85-.69-7.31-1.6-2.72-1.02-5.74-2.78-8.67-3.07-3.65-.37-8.52 2.06-13.38 1.25-4.87-.81-8.92-6.7-15.61-5.88-6.7.81-9.13 4.06-15 2.43-.91-.25-1.73-.52-2.49-.8a6.51 6.51 0 0 0-.16 1.8c.9.1 1.82.2 2.77.28M23.6 61.82c-2.24-1.01-4.23-1.83-7-1.83-.45 0-.86.02-1.26.05.53.9 1.34 2.2 2.36 3.73 1.53.3 3.77.7 6.47 1.08-.3-1.14-.48-2.31-.57-3.03" fill="#E8B63D"/>
<path d="M33 75.01c.5 1.28.6 2.5-.79 2.58-2.93.18-14.5-13.82-14.52-13.83a61.82 61.82 0 0 0 8.54 10.43C32.7 80.27 39 80.46 39 80.46s-2.03-1.62-3.85-3.04a13.13 13.13 0 0 1-2.15-2.4M41.63 78.84l1.31.69c-6.04-3.58-11.5-7.41-11.54-7.44a65.6 65.6 0 0 0 10.23 6.75M93.45 88.1a33.72 33.72 0 0 1-11.38 2.54c-9.15.3-20.75-2.87-28.85-5.89l2 .98s-1.02-.2-3.45-.6c-2.43-.4-7.1-2.23-7.1-2.23s6.29 5.47 12.57 9.53c6.29 4.05 17.64 8.3 17.64 8.3s11.54-4.88 18.57-12.64M76.52 100.13l-.15.06.15-.06M81.73 97.98l-.45.2.45-.2M76.05 100.31l-.12.05.11-.05M80.53 98.48l-.36.16.36-.16M84.72 96.7l-.82.35.82-.36M83.11 97.39l-.59.25.59-.25M77.1 99.9l-.18.07.17-.07M78.56 99.31l-.24.1.24-.1M79.49 98.92l-.31.14.3-.14" fill="#E8B63D"/>
<path d="M66.83 52.6c-.07-2.58 1.23-4.7 2.92-4.76 1.7-.04 3.12 2 3.19 4.58.07 2.58-1.24 4.7-2.92 4.75-1.7.05-3.12-2-3.19-4.58zm17.56 45.22c-5.62-2.47-12.84-7.58-13.06-15.43-.2-6.76.32-19.85.48-23.37 1.88-.93 3.2-3.56 3.11-6.61-.1-3.79-2.31-6.8-4.93-6.72-2.62.07-4.66 3.2-4.55 6.98.1 3.73 2.25 6.7 4.81 6.71-.25 3.67-.84 17.21-.51 23.54.38 7.3 7.66 15.72 18.12 17.27 10.32 1.51 29.54 1.09 29.54 1.09l1.71-1.24S90 100.3 84.4 97.82z" fill="#322549"/>
</g>
</svg>
As you can see we haven’t defined a preserveAspectRatio
for our SVG so it will default to preserveAspectRatio="xMidYMid meet"
.
正如你所看到的,我们没有定义preserveAspectRatio
我们的SVG所以它会默认为preserveAspectRatio="xMidYMid meet"
。
The scale ratio of our image is 1:1
so when the height and width of our viewPort
matches, we won’t have to worry about our preserveAspectRatio
我们的图像的比例是1:1
,所以当我们的高度和宽度viewPort
的比赛,我们不会有我们的担心preserveAspectRatio
What will happen when the aspect ratio of our viewPort
and viewBox
are different?
当viewPort
和viewBox
的宽高比不同时会发生什么?
Let’s look at a few examples:
让我们看几个例子:
In the above example our viewPort
has the dimensions 100x100
so our preserveAspectRatio
does not matter here.
在上面的例子中,我们viewPort
具有尺寸100x100
所以我们preserveAspectRatio
此处无关紧要。
Now our dimensions are 500x100
, as you can see the image is now centered and the aspect ratio stays the same.
现在,我们的尺寸为500x100
,如您所见,图像现在居中且纵横比保持不变。
If we were to set preserveAspectRatio="none"
, our image would stretch to fit the viewPort
just like a raster image:
如果我们要设置viewPort
preserveAspectRatio="none"
,那么我们的图像将像栅格图像一样拉伸以适合viewPort
:
I think you can now see why preserveAspectRatio
is so useful!
我认为您现在可以看到为什么preserveAspectRatio
如此有用!
相遇VS切片 (Meet vs Slice)
So far we have only used the meet
value, this tells our image to be contained within the viewPort
, similar to background-size: contain
. What would happen instead if we changed this to slice
?
到目前为止,我们只使用了meet
价值,这告诉我们的形象是包含在中viewPort
,类似background-size: contain
。 如果我们将其更改为slice
将会发生什么呢?
Hmm, so what exactly has happened? slice
behaves similarly to background-size:cover
, our image will basically scale to the dimensions of the viewPort
and slice off any excess. This can be quite useful for background images or a background on a banner.
嗯,到底发生了什么事? slice
行为类似于background-size:cover
,我们的图像基本上会按比例缩放到viewPort
的尺寸,并viewPort
任何多余的部分。 这对于背景图像或横幅背景非常有用。
中/最小/最大 (Mid/Min/Max)
Above we have used xMidYMid
,which is what you will use the majority of the time but we can also use Min
and Max
.
上面我们使用了xMidYMid
,这是您大部分时间使用的,但我们也可以使用Min
和Max
。
Let’s take the following:
让我们采取以下措施:
Our alligator is centered here due to xMidYMid
, if we wanted to align our alligator to the left, we would just do xMinYMid
.
由于xMidYMid
,我们的鳄鱼在此xMidYMid
,如果我们想将鳄鱼向左对齐,我们只需要xMinYMid
。
As a little test, ask yourself how would you align the alligator to the right?
作为一个小测试,问问自己,如何将鳄鱼对准右边?
Now let’s take the following dimensions:
现在,我们来考虑以下方面:
If in this example, we wanted to align our alligator to the top we would do xMidYMin
and it would give us the following:
如果在此示例中,我们想将短吻鳄对准顶部,我们将执行xMidYMin
,它将为我们提供以下内容:
Again ask yourself, how would you align this to the bottom?
再次问自己,如何将其与底部对齐?
结论 (Conclusion)
This should give you a very solid understanding of preserveAspectRatio
and how to scale your graphics. Thank you for reading!
这应该使您对preserveAspectRatio
以及如何缩放图形非常了解。 感谢您的阅读!
翻译自: https://www.digitalocean.com/community/tutorials/svg-preserve-aspect-ratio
svg嵌套svg