이미지와 같은 <use> 요소를 통해 SVG 아이콘의 크기를 조정하는 방법

Question

내 HTML 문서에는 ，其中包含许多具有 id 属性的项目，例如 icon-x가 있습니다.

그러면 다음과 같은 아이콘을 재사용하고 싶습니다.

으아아아

그러나 이 예의 아이콘은 소스 SVG에서 크기가 다를 수 있습니다. 나는 그것들이 맞기를 원하지만 div.container 컨테이너의 svg 주위에 공백이 있습니다.

어떻게 알 수 있나요我指向的东西，并知道那个东西定义了的大小，这样当我做CSS像 .container svg { width: 100%; height: auto;} 它的工作原理与 라벨이 같은가요?

Answer 1

1. icon-x 기호이거나 viewBox 속성이 있는 중첩된 svg여야 합니다

2. icon-x时，您可以为元素指定宽度을 사용할 때 요소에 width 및 height

   를 지정할 수 있습니다.
에 대해 다른 위치(x 및 y 속성)나 다른 패딩을 지정할 수도 있습니다.

。您可以选择使用嵌套 svg。在这种情况下，您可能希望将其放入

다음 예에서는

를 사용합니다. 선택적으로 중첩된 SVG를 사용할 수 있습니다. 이 경우

에 넣을 수 있습니다. 🎜🎜 🎜 으아아아 으아아아