스케일링 <use> 올바른 종횡비를 가진 외부 SVG

(외부) SVG 아이콘을 사용하고 CSS를 사용하여 채우기 색상의 스타일을 지정하고 싶습니다. 최대한 볼 수있는 가장 좋은 방법은 내가 그것을 사용하고자하는 모든 장소에서 <svg><use xlink:href="…" /></svg> 구조). 동시에 정확한 가로 세로 비율로 크기를 조정하여 다른 텍스트 크기로 사용할 수 있기를 바랍니다.스케일링 <use> 올바른 종횡비를 가진 외부 SVG

그러나 height:1.5em;width:auto으로 스케일링 AFAICS는 SVG가 viewBox 인 경우에만 작동합니다. viewBox를 얻거나 스케일없이 올바르게 수행 할 수있는 방법이 있습니까?

출처

2017-01-14 CrystalGamma

extrnal SVG 아이콘은 외부 아이콘 파일 자체 내에있는 CSS로만 스타일을 지정할 수 있습니다. XMLHttpRequest를 사용하여 아이콘 파일을로드하면 DOM을 사용하여 viewBox를 읽을 수 있습니다. –

예술의 시작자는 SVG를 아이콘 글꼴로 바꾸는 것입니다. 예를 들어 http://fontello.com/을 사용하여 SVG를 글꼴로 바꿀 수 있습니다. –

@RobertLongson : 구조체를 사용하려고합니다. XHR은 광고/스크립트/요청 차단기에 의해 차단 될 가능성이 더 큰 강력한 기능이기 때문에 XHR을 사용해야하는 것을 피하기 위해 질문에 설명되어 있습니다. 그렇지 않으면 나는 그것을 사용했을 것이다. – CrystalGamma

SVG 편집기에 viewBox이 추가되지 않은 경우 치수를 직접 계산하여 수동으로 추가하는 것 이외에도 쉽게 얻을 수있는 방법이 없습니다.

마우스를 사용하여 편집기에서 판독을 조정하거나
적절한 요소에 getBBox()를 호출 자바 스크립트 및 사용, 또는
사용 시행 착오. 크기를 좁힐 때까지 x, y, 너비 및 높이를 반복하여 피들링합니다.

출처

2017-01-15 16:17:20

정확하게 말하자면 : 외부 파일에는 viewBox가 있습니다. 내 문제는 SVG 요소가''에 자동으로 설정하는 방법을 모르겠습니다. – CrystalGamma

'getBBox()'제안을 시도했지만 결과적으로 항상 빈 SVGRect를 얻습니다. – CrystalGamma

[SVGUseElement.instanceRoot] (http://html5index.org/SVG%20-%20SVGElementInstance.html)가 필요한 것은 수행하지만 적어도 사용하는 Firefox Nightly는 구현하지 않습니다. – CrystalGamma

스케일링 <use> 올바른 종횡비를 가진 외부 SVG

답변

관련 문제