blocks|key|214985|text|若要独立于图像的缩放大小指定SVG图像内的坐标，请使用SVG元素的viewBox属性来定义图像的边框在图像坐标系中的位置，并使用width和height属性来定义相对于所含页面的宽度或高度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|214986|例如，如果您具有以下内容：|214987|<svg>
++++<polygon+fill=red+stroke-width=0+
+++++++++++++points="0,10+20,10+10,0"+/>
</svg>|code-block|syntax|javascript|214988|它将渲染为一个10px+x+20px的三角形：|214989|​|214990|📷|atomic|214991|214992|现在，如果仅设置宽度和高度，将更改SVG元素的大小，但不会缩放三角形：|214993|<svg+width=100+height=50>
++++<polygon+fill=red+stroke-width=0+
+++++++++++++points="0,10+20,10+10,0"+/>
</svg>|214994|214995|214996|214997|如果设置视图框，则会导致它对图像进行变换，以使给定框(在图像的坐标系中)被放大以适应给定的宽度和高度(在页面的坐标系中)。例如，要将三角形放大到100px+x+50px：|214998|<svg+width=100+height=50+viewBox="0+0+20+10">
++++<polygon+fill=red+stroke-width=0+
+++++++++++++points="0,10+20,10+10,0"+/>
</svg>|214999|215000|215001|215002|如果要将其放大到HTML视口的宽度：|215003|<svg+width="100%25"+viewBox="0+0+20+10">
++++<polygon+fill=red+stroke-width=0+
+++++++++++++points="0,10+20,10+10,0"+/>
</svg>|215004|215005|215006|215007|请注意，默认情况下，会保留纵横比。因此，如果您指定元素的宽度应为100%25，但高度应为50px，则它实际上只能缩放到50px的高度(除非您有一个非常窄的窗口)：|215008|<svg+width="100%25"+height="50px"+viewBox="0+0+20+10">
++++<polygon+fill=red+stroke-width=0+
+++++++++++++points="0,10+20,10+10,0"+/>
</svg>|215009|215010|215011|215012|如果您实际上想要水平拉伸，请禁用preserveAspectRatio=none的纵横比保留功能|215013|<svg+width="100%25"+height="50px"+viewBox="0+0+20+10"+preserveAspectRatio="none">
++++<polygon+fill=red+stroke-width=0+
+++++++++++++points="0,10+20,10+10,0"+/>
</svg>|215014|215015|215016|215017|(请注意，虽然在我的示例中我使用了适用于HTML嵌入的语法，但为了将示例作为图像包含在StackOverflow中，我将其嵌入到另一个SVG中，因此我需要使用有效的XML语法)|215018|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/de03f3c7df39c3062c3b192edca6ed8c.svg|imageAlt|1|https://ask.qcloudimg.com/http-save/yehe-900000/1015c7186140424be63c8fb500e11ad8.svg|2|https://ask.qcloudimg.com/http-save/yehe-900000/f7a81d5f2431d3838b42a595a2e9bafc.svg|3|https://ask.qcloudimg.com/http-save/yehe-900000/dba9b0134d36c5bbe8a70fb2cf36c4a0.svg|4|https://ask.qcloudimg.com/http-save/yehe-900000/e1c5d8c8823fa247c354070605091d25.svg|5|https://ask.qcloudimg.com/http-save/yehe-900000/d21f3b8bb1dfb205c3f174add5059f9d.svg^0|X|7|1S|5|1Y|6|0|0|0|0|0|0|1|0|0|0|0|0|0|0|1|1|0|0|0|0|0|0|1|2|0|0|0|0|0|0|1|3|0|0|0|0|0|0|1|4|0|0|G|O|0|0|0|0|1|5|0|0|0^^$0|@$1|2|3|4|5|6|7|2E|8|@$9|2F|A|2G|B|C]|$9|2H|A|2I|B|C]|$9|2J|A|2K|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2L|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|2M|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|2N|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|2O|8|@]|D|@]|E|$]]|$1|Q|3|R|5|S|7|2P|8|@]|D|@$9|2Q|A|2R|1|2S]]|E|$]]|$1|T|3|P|5|6|7|2T|8|@]|D|@]|E|$]]|$1|U|3|V|5|6|7|2U|8|@]|D|@]|E|$]]|$1|W|3|X|5|J|7|2V|8|@]|D|@]|E|$K|L]]|$1|Y|3|P|5|6|7|2W|8|@]|D|@]|E|$]]|$1|Z|3|R|5|S|7|2X|8|@]|D|@$9|2Y|A|2Z|1|30]]|E|$]]|$1|10|3|P|5|6|7|31|8|@]|D|@]|E|$]]|$1|11|3|12|5|6|7|32|8|@]|D|@]|E|$]]|$1|13|3|14|5|J|7|33|8|@]|D|@]|E|$K|L]]|$1|15|3|P|5|6|7|34|8|@]|D|@]|E|$]]|$1|16|3|R|5|S|7|35|8|@]|D|@$9|36|A|37|1|38]]|E|$]]|$1|17|3|P|5|6|7|39|8|@]|D|@]|E|$]]|$1|18|3|19|5|6|7|3A|8|@]|D|@]|E|$]]|$1|1A|3|1B|5|J|7|3B|8|@]|D|@]|E|$K|L]]|$1|1C|3|P|5|6|7|3C|8|@]|D|@]|E|$]]|$1|1D|3|R|5|S|7|3D|8|@]|D|@$9|3E|A|3F|1|3G]]|E|$]]|$1|1E|3|P|5|6|7|3H|8|@]|D|@]|E|$]]|$1|1F|3|1G|5|6|7|3I|8|@]|D|@]|E|$]]|$1|1H|3|1I|5|J|7|3J|8|@]|D|@]|E|$K|L]]|$1|1J|3|P|5|6|7|3K|8|@]|D|@]|E|$]]|$1|1K|3|R|5|S|7|3L|8|@]|D|@$9|3M|A|3N|1|3O]]|E|$]]|$1|1L|3|P|5|6|7|3P|8|@]|D|@]|E|$]]|$1|1M|3|1N|5|6|7|3Q|8|@$9|3R|A|3S|B|C]]|D|@]|E|$]]|$1|1O|3|1P|5|J|7|3T|8|@]|D|@]|E|$K|L]]|$1|1Q|3|P|5|6|7|3U|8|@]|D|@]|E|$]]|$1|1R|3|R|5|S|7|3V|8|@]|D|@$9|3W|A|3X|1|3Y]]|E|$]]|$1|1S|3|P|5|6|7|3Z|8|@]|D|@]|E|$]]|$1|1T|3|1U|5|6|7|40|8|@]|D|@]|E|$]]|$1|1V|3|-4|5|6|7|41|8|@]|D|@]|E|$]]]|1W|$1X|$5|1Y|1Z|20|E|$21|22|23|-4]]|24|$5|1Y|1Z|20|E|$21|25|23|-4]]|26|$5|1Y|1Z|20|E|$21|27|23|-4]]|28|$5|1Y|1Z|20|E|$21|29|23|-4]]|2A|$5|1Y|1Z|20|E|$21|2B|23|-4]]|2C|$5|1Y|1Z|20|E|$21|2D|23|-4]]]]

<p>To specify the coordinates within the SVG image independently of the scaled size of the image, use the <code>viewBox</code> attribute on the SVG element to define what the bounding box of the image is in the coordinate system of the image, and use the <code>width</code> and <code>height</code> attributes to define what the width or height are with respect to the containing page.</p>

<p>For instance, if you have the following:</p>

<pre><code>&lt;svg&gt;
    &lt;polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" /&gt;
&lt;/svg&gt;
</code></pre>

<p>It will render as a 10px by 20px triangle:</p>

<p><img src="https://ephemera.continuation.org/stackoverflow/svg-scale/1.svg" alt="10x20 triangle"></p>

<p>Now, if you set only the width and height, that will change the size of the SVG element, but not scale the triangle:</p>

<pre><code>&lt;svg width=100 height=50&gt;
    &lt;polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" /&gt;
&lt;/svg&gt;
</code></pre>

<p><img src="https://ephemera.continuation.org/stackoverflow/svg-scale/2.svg" alt="10x20 triangle"></p>

<p>If you set the view box, that causes it to transform the image such that the given box (in the coordinate system of the image) is scaled up to fit within the given width and height (in the coordinate system of the page). For instance, to scale up the triangle to be 100px by 50px:</p>

<pre><code>&lt;svg width=100 height=50 viewBox="0 0 20 10"&gt;
    &lt;polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" /&gt;
&lt;/svg&gt;
</code></pre>

<p><img src="https://ephemera.continuation.org/stackoverflow/svg-scale/3.svg" alt="100x50 triangle"></p>

<p>If you want to scale it up to the width of the HTML viewport:</p>

<pre><code>&lt;svg width="100%" viewBox="0 0 20 10"&gt;
    &lt;polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" /&gt;
&lt;/svg&gt;
</code></pre>

<p><img src="https://ephemera.continuation.org/stackoverflow/svg-scale/4.svg" alt="300x150 triangle"></p>

<p>Note that by default, the aspect ratio is preserved. So if you specify that the element should have a width of 100%, but a height of 50px, it will actually only scale up to the height of 50px (unless you have a very narrow window):</p>

<pre><code>&lt;svg width="100%" height="50px" viewBox="0 0 20 10"&gt;
    &lt;polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" /&gt;
&lt;/svg&gt;
</code></pre>

<p><img src="https://ephemera.continuation.org/stackoverflow/svg-scale/5.svg" alt="100x50 triangle"></p>

<p>If you actually want it to stretch horizontally, disable aspect ratio preservation with <code>preserveAspectRatio=none</code>:</p>

<pre><code>&lt;svg width="100%" height="50px" viewBox="0 0 20 10" preserveAspectRatio="none"&gt;
    &lt;polygon fill=red stroke-width=0 
             points="0,10 20,10 10,0" /&gt;
&lt;/svg&gt;
</code></pre>

<p><img src="https://ephemera.continuation.org/stackoverflow/svg-scale/6.svg" alt="300x50 triangle"></p>

<p>(note that while in my examples I use syntax that works for HTML embedding, to include the examples as an image in StackOverflow I am instead embedding within another SVG, so I need to use valid XML syntax)</p>


blocks|key|215151|text|胡闹&发现这个CSS似乎包含了Chrome浏览器中的SVG，直到容器比图像大：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215152|div.inserted-svg-logo+svg+{+max-width:100%25;+}|code-block|syntax|javascript|215153|似乎也可以在FF+%2B+IE+11中工作。|215154|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Messing around &amp; found this CSS seems to contain the SVG in Chrome browser up to the point where the container is larger than the image:</p>

<pre><code>div.inserted-svg-logo svg { max-width:100%; }
</code></pre>

<p>Also seems to be working in FF + IE 11.</p>


blocks|key|215257|text|调整currentScale属性在IE中有效(我在IE+11上测试过)，但在Chrome中不行。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215258|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Adjusting the currentScale attribute works in IE ( I tested with IE 11), but not in Chrome.</p>


blocks|key|215373|text|更改SVG文件对我来说不是一个公平的解决方案，所以我使用了relative+CSS+units。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|215374|vh、vw、%25都非常方便。我使用了像height:+2.4vh;这样的CSS来设置我的SVG图像的动态大小。|style|CODE|215375|entityMap|0|LINK|mutability|MUTABLE|url|https://www.w3schools.com/CSSref/css_units.asp^0|T|I|0|0|0|2|3|2|6|1|I|E|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@$A|U|B|V|F|G]|$A|W|B|X|F|G]|$A|Y|B|Z|F|G]|$A|10|B|11|F|G]]|9|@]|C|$]]|$1|H|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]]]

<p>changing the SVG file was not a fair solution for me so instead, I used <a href="https://www.w3schools.com/CSSref/css_units.asp" rel="nofollow noreferrer">relative CSS units</a>. </p>

<p><code>vh</code>, <code>vw</code>, <code>%</code> are very handy. I used a CSS like <code>height: 2.4vh;</code> to set a dynamic size to my SVG images.</p>


blocks|key|215429|text|另一种简单的方法是|type|unstyled|depth|inlineStyleRanges|entityRanges|data|215430|transform:+scale(1.5);|code-block|syntax|javascript|215431|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Another simple way is </p>

<pre><code>transform: scale(1.5);
</code></pre>


<p>I want to have an inline svg element's contents scale when size is non-native. Of course I could have it as a separate file and scale it like that.</p>

<p>index.html: <code>&lt;img src="foo.svg" style="width: 100%;" /&gt;</code></p>

<p>foo.svg: <code>&lt;svg width="123" height="456"&gt;&lt;/svg&gt;</code></p>

<p>However, I want to add additional styles to the SVG thru CSS, so linking an external one is not an option. How do I make an inline SVG scale?</p>


How can I make an svg scale with its parent container?

我想让一个内联svg元素的内容在size是非原生的时候缩放。当然，我可以将它作为一个单独的文件，并像这样扩展它。index.html：<img src="foo.svg" style="width: 100%;" />foo.svg：<svg width="123" height="456"></svg>但是，我想通过...

问如何使用其父容器进行svg缩放？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用其父容器进行svg缩放？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用其父容器进行svg缩放？
EN