как сохранить AspectRatio SVG Icomoon - PullRequest
0 голосов
/ 04 февраля 2019

Как дела!Думаю, возникла редкая проблема, потому что пока не могу найти ответ в Интернете.

Я использую Icomoon для хранения своей библиотеки svg и загрузки их через CDN в мои проекты.Тем не менее, я хочу использовать SVG как фон, и мне нужно, чтобы он работал на VW.Но похоже, что preserveAspectRatio = "none" не работает таким образом, потому что Icomoon генерирует свой HTML-код вроде:

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

Так что, мне кажется, это не сработает?Любые рекомендации?

1 Ответ

0 голосов
/ 04 февраля 2019

Предположим, у вас есть значок

<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 "

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...