1. 홈
  2. 질의 응답
  3. 외부 svg를 참조하는 use 요소의 내용을 가져올 수 있습니까?

외부 svg를 참조하는 use 요소의 내용을 가져올 수 있습니까?

2016-07-14 3 views
3

그림자 돔의 페이지에 svg 아이콘을 렌더링하는 웹 구성 요소를 구축 중입니다. 즉외부 svg를 참조하는 use 요소의 내용을 가져올 수 있습니까?

<ba-icon i="airplane"></ba-icon>

SVG 아이콘이 많은 외부 svg 스프라이트 파일이 있습니다. 웹 구성 요소의

내부 구조는 그림자 돔에 다음과 같은 렌더링 :

<svg> 
    <use xlink:href="i.dist.svg#i-airplane"></use> 
<svg>

모든 것이 제대로 화면에 렌더링되는, 그러나 나는 SVG의 내부에 내장되어 몇 가지 정보를 한 후에 특별히 정보가 포함입니다 viewbox에서 (예 : viewBox="0 0 32 32").

use에 렌더링 된 내용이 그림자 돔에도 입력된다는 것을 알고 있습니다. 그러나 use에 포함 된 정보를 얻는 또 다른 방법을 찾으려고합니다. 나는 svg의 내용을 ajax하려고 시도했다. 그러나 이것은 웹 컴포넌트의 각 인스턴스가 현재 호출을하고 있기 때문에 페이지상의 여러 아이콘에 큰 문제가되고있다. 어떻게 그럴 수 있니? 참고로

:

enter image description here

출처

2016-07-14 KevBot

+0

다른 방법은 없습니다. –

+0

원본 SVG에서 이러한 정보를 사용자 정의 요소로 가져올 수 있습니다. – Supersharp

+0

@Supersharp, 나는 잘 모르겠다. 외부 svg ('/ images/sprite.svg # some-icon')를 참조하는 페이지에 svg를 넣으면 브라우저는 이것을 외부 리소스로 취급하고 "sprite"파일을 다른 어떤 것과 동일한 방식으로 요청할 것입니다 영상. 유일한 차이점은 ID를 통해 스프라이트 파일에서 특정 심볼을 가져 오는 것입니다 (# some-icon). 나는 원래의 svg를 페이지에 삽입하지 않을 것이다. – KevBot

답변

3

는 사실이 사용하는 SVG 파일의 구조를 따라이 acheive하는 manys 방법이다,하고 싶은. 외부 파일로 SVG 스프라이트와

, 당신은 파일을 구문 분석 기술을 HTML 수입의 이익을 취할 수 있습니다

<head> 
... 
    <link id="ic" rel="import" href="i.dist.svg"> 

    <script> 
    document.registerElement("ba-icon", { 
     prototype: Object.create(HTMLElement.prototype, { 
      createdCallback: { 
       value: function() 
       { 
        var name = "i-" + this.getAttribute('i') 
        var sh = this.createShadowRoot() 
        sh.innerHTML = '<svg><use xlink:href="i.dist.svg#' + name + '"/>' 
        this.setAttribute("i-viewBox", ic.import.querySelector('svg#' + name).getAttribute("viewBox")) 
       } 
      } 
     }) 
    }) 
    </script> 
</head>

SVG 파일을 두 번 가져 오지가 브라우저 캐시되기 때문이다.

참고 :이 솔루션 (<use> 사용)은 가장 빠를 수는 없지만 코드를 작성하고 이해하는 것이 가장 간단합니다. 그것은 당신이 정말로 (그리고 언제) 속성으로하고 싶은지에 달려 있습니다.

출처

2016-07-15 15:56:58 Supersharp

+0

이것은 정말 훌륭하게 잘 작동했습니다! i.dist.svg 파일을 가져 오는 것을 고려하지 않았습니다. 하지만 이렇게하면 viewBox 데이터를 얻을 수있어서 일부 치수를 파싱 할 수있었습니다. 그리고 이제는 스프라이트 파일이 본질적으로 쿼리 할 수있는 문서이기 때문에 심볼의 자식 노드를 사용하여'use'를 사용하지 않아도됩니다. – KevBot

+0

예 심볼의 자식 노드를 사용하는 것이 더 나은 방법이라고 생각합니다. – Supersharp

관련 문제

 관련 문제