Question

你好吗！我猜有一个罕见的问题，原因是到目前为止，在互联网上找不到任何答案。

我正在使用Icomoon存储我的svg库，并通过CDN将其加载到我的项目中。但是，我想像背景一样使用SVG，并且需要在大众汽车上使用。但是似乎prepareAspectRatio =“ none”不能以这种方式工作，因为Icomoon正在生成其HTML，例如：

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

所以我猜这对我不起作用？有什么建议吗？

Answer 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属性指示具有提供给定宽高比的viewBox必须适合具有不同的宽高比。

preserveAspectRatio =“ none”属性的值违反了比例的保留。因此，如果需要保留图像的比例，则不应使用该值（none）。默认情况下，该属性具有preserveAspectRatio =" xMinYMid meet "

如何保存AspectRatio SVG Icomoon

1 个答案: