과 같이 # 기호

Question

나는이 사이트에있는 아이콘에 대한 SVG 스프라이트를 사용하는 것을 시도하고, 탈출 장고를 중지하는 방법 : #이 장고에 의해 탈출 도착하기 때문에

<svg aria-hidden="true" class="icon"> 
    <use xlink:href="{% static 'images/site-icons.svg#icon-twitter' %}"></use> 
</svg> 

그러나이 작동하지 않습니다 그래서 나는 다음과 같이 끝난다 :

<svg aria-hidden="true" class="icon"> 
    <use xlink:href="/static/images/site-icons.svg%23icon-twitter"></use> 
</svg> 

아무 아이콘도 렌더링되지 않는다. 내가 템플릿에 site-icons.svg의 내용을 붙여

<svg aria-hidden="true" class="icon"> 
    <use xlink:href="#icon-twitter"></use> 
</svg> 

을 할 경우 작동 이후이 문제는 탈출이다 격리 한 때문에 문제가 이스케이프입니다.

아무도 어떻게이 탈출을 피하는 지 알고 있습니까?

Answer 1

당신은

{% static 'images/site-icons.svg#icon-twitter' %} 

이어야 정적 태그 다음에 ID를 이동해야

{% static 'images/site-icons.svg' %}#icon-twitter 

이 뒤에 그 이유는 정적 태그의 작업이 정적 파일의 경로를 찾을 수 있다는 것이다, 필요한 모든 것은 파일의 위치입니다. 템플릿을 렌더링 할 때 하나의 (연결된?) 링크로 표시되도록 추가해야 할 것이 있습니다.