정의가있는 SVG 요소 만 렌더링하지 마십시오

다른 SVG 요소에서 사용할 모든 SVG 정의가 포함 된 내 페이지에 <svg> 태그를 하나 갖고 싶습니다. 이 같은
뭔가 : 정의가있는 SVG 요소 만 렌더링하지 마십시오

<html> 
 
<head> 
 

 
<svg> 
 
    <defs> 
 
     <filter id="shadow1"> 
 
      <feDropShadow dx="3" dy="7" stdDeviation="2"/> 
 
     </filter> 
 
    </defs> 
 
</svg> 
 

 
</head> 
 
<body style="display: flex"> 
 

 
    <svg viewBox="0 0 100 100" width="100"> 
 
     <path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" /> 
 
    </svg> 
 

 
</body> 
 
</html>

이 작동하지만 문제는 브라우저가 몸 안에이었다 것처럼 <head>에 년대 <svg> 태그를 렌더링하는 것입니다. 나는 <svg> 태그에 width=0 및 height=0을 설정하면

, 그것은 사라지고 있지만, 여전히 <body>의 하위 요소입니다.

<svg> 태그는 정의가 있지만 페이지의 <body> 외부에있을 수 있습니까?

또는 브라우저에 <svg> 요소가 순전히 선언적이며 문서의 보이는 영역에 속하지 않음을 알리는 최소한의 방법.

피씨 : 내부의 정의가 동적이며 보려는 페이지에 의존하기 때문에 외부 .svg 파일을 사용하고 싶지 않습니다.

출처

2017-10-07 Getfree

아니요, SVGElement (<svg>)은 meta-data contents의 일부가 아니며 내용 유형은 <head>입니다. <body>의 자손이어야합니다.

그러나 CSS로 절대적으로 배치하고 Z- 인덱스를 -1로 설정하고 크기 속성을 0으로 설정하면 렌더링되지 않습니다.

svg.defs { 
 
    position: absolute; 
 
    z-index: -1; 
 
}

<svg width="0" height="0" class="defs"> 
 
    <defs> 
 
    <filter id="shadow1"> 
 
     <feDropShadow dx="3" dy="7" stdDeviation="2"/> 
 
    </filter> 
 
    </defs> 
 
</svg> 
 
<svg viewBox="0 0 100 100" width="100"> 
 
    <path d="M0,0 L50,50" stroke="red" filter="url(#shadow1)" /> 
 
</svg>

출처

2017-10-07 03:27:55 Kaiido

정의가있는 SVG 요소 만 렌더링하지 마십시오

답변

관련 문제