如何preserveAspectRatio SVG Icomoon

问题描述 投票:-2回答:1

你好吗!有一个罕见的问题,我想原因无法找到互联网上的任何答案为止。

即时通讯使用Icomoon来存储我的SVG库,并通过CDN在我的项目中加载它们。不过,我想使用SVG像背景和需要它STRETCH时对VW。但似乎preserveAspectRatio =“无”不工作在这条路上,因为Icomoon是产生像它的HTML:

<svg preserveAspectRatio="none" class="icon icon-navigation_top-bar">
<use xlink:href="#icon-navigation_top-bar" style="width: 100vw;"></use>
</svg>

所以对我来说这不会工作,我猜?任何建议?

html5 css3 svg
1个回答
1
投票

假设你有一个图标

<svg width="100" height="50"  version="1.1" xmlns="http://www.w3.org/2000/svg">
       
      <path id="icon"  d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46
	s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194
	C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008
	c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006
	c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003
	c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019
	c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999
	s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984
	C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427
	c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003
	C42,36.923,42,36.736,41.605,36.414z">
	  </path>
    </svg>

为了使它适应,你必须删除的viewport width ="100" "height ="50"的宽度和高度,并添加viewBox =" 0 0 100 50"

.container {
width:50%;
height:50%;
}
<div class="container">
<svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 50">
       
      <path id="icon"  d="M27.981,41.947c0.001,0.019,0.006,0.036,0.006,0.056C27.987,44.21,26.202,46,24,46
	s-3.987-1.79-3.987-3.997c0-0.019,0.005-0.036,0.005-0.056C7.267,41.597,4,39.52,4,37.003c0-0.788,0.344-1.53,1.181-2.194
	C11.209,28.094,13,29.953,13,20.006c0-6.632,0.271-12.712,8.258-13.807C21.1,5.833,21.01,5.431,21.01,5.008
	c0-1.656,1.339-2.998,2.99-2.998s2.99,1.342,2.99,2.998c0,0.423-0.09,0.825-0.248,1.191C34.729,7.294,35,13.374,35,20.006
	c0,9.977,1.8,8.073,7.872,14.86C43.666,35.516,44,36.237,44,37.003C44,39.518,40.647,41.595,27.981,41.947z M24,44.003
	c1.102,0,1.994-0.895,1.994-1.998c0-0.006-0.002-0.012-0.002-0.018c-0.651,0.009-1.296,0.019-1.992,0.019s-1.34-0.01-1.992-0.019
	c0,0.006-0.002,0.012-0.002,0.018C22.006,43.108,22.898,44.003,24,44.003z M24,4.007c-0.551,0-0.996,0.447-0.996,0.999
	s0.445,1,0.996,1s0.997-0.448,0.997-1S24.551,4.007,24,4.007z M41.605,36.414c0,0-1.522-1.714-4.018-3.984
	C34.179,29.325,33,27.853,33,20.006c0-7.664-0.418-12-9-12s-9,4.336-9,12c0,7.848-1.18,9.321-4.59,12.427
	c-2.447,2.229-3.986,3.942-3.986,3.942C6,36.712,6,36.908,6,37.003c0,0.123,0.205,3.003,18,3.003s18-2.88,18-3.003
	C42,36.923,42,36.736,41.605,36.414z">
	  </path>
    </svg>

</div>

MDN

所述preserveAspectRatio属性指示如何与一个视框提供给定的纵横比的元件必须适合具有不同纵横比的视口。

属性preserveAspectRatio =“无”的值违反比例的保存。因此,如果你需要保留图像的比例,不应该用那么这个值(none)。默认情况下,这个属性preserveAspectRatio =" xMinYMid meet "

© www.soinside.com 2019 - 2024. All rights reserved.