overflow: visible을 <svg> 요소에 설정할 수 있습니까?오버플로 : SVG에 표시
This simple example on jsfiddle 모든 브라우저에서 차단됨 (Chrome 및 Firefox의 일부 버전)은 overflow: hidden처럼 동작합니다.
누구나 svg 지원이 단순한 일을하기에는 아직 너무 미성숙한지, 아니면 내 코드에서 뭔가 잘못하고 있다고 말할 수 있습니까?
내 실용 overflow: visible은 -0 눈금의 아래쪽 절반이 잘리는 그래프의 범위 축입니다.
인라인 < svg> 요소를 HTML로 가정합니다. 그렇다면 구현 제한 사항입니다. IE9 +는 overflow:visible을 < svg> 요소에 허용하지만, 지금까지는 다른 브라우저가 AFAIK를 사용하지 않습니다.
하나의 가능한 해결 방법 (이것은 실제로 IMHO에서 수행해야합니다)은 svg 내부의 좌표계를 정의하는 viewBox을 지정하는 것입니다. 그런 다음이 좌표계 안에 물건을 그립니다. 물건이 잘리는 경우 (즉, 요소가 viewBox 영역 밖에있는 경우) viewBox 너비 및/또는 높이를 적절히 늘립니다.
viewBox의 기본 설정에 대해 궁금한 점이 있으면 [0 0 width height] (너비와 높이가 현재 가지고있는 svg의 크기 임)을 시도한 다음 하단 눈금이 완전히 보일 때까지 높이를 높이십시오.
2014 업데이트 : 브라우저 간에는 여전히 일관성이 없습니다. Firefox 및 IE는 인라인 svg 요소에 overflow:visible을 지원하고 깜박임 (Opera 23/Chrome 36)은 이에 대한 지원을 추가했습니다. 자세한 내용은 bugreport을 참조하십시오.
viewBox를 설정하면 내 svg 요소가 기본 svg 요소 내부에 맞게 조정됩니다. 그들은 여전히 넘치지 않습니다. 오버플로하려는 물건에 맞게 svg를 더 크게 만들면 html 레이아웃이 손상됩니다. –
아마 내가 알아야 할 것은 웹킷이 이것을 지원하는지 여부입니다. 만약 표준이 그것을 명시했다면, 그리고 웹킷이 그것을 지원하는데 사용되었다고해도 될까요? –
아, 지금 무슨 뜻인지 안다. Viewport (aka 크기)를 늘림으로써'overflow : visible'에 대한 지원이 부족하다는 것을 해결할 방법이 없습니다. –
overflow: visible
box-shadow : 0px -0px 10000px transparent /*trick for chrome*/
큰 상자 그림자를 SVG에 추가하거나 거대한 그림자가있는 DIV에 SVG를 추가하면 해결됩니다. Chrome에서 오버플로가 상자 - 섀도 한도로 잘리는 것으로 나타났습니다.
보이지 않습니다. 또한 http://stackoverflow.com/q/10077264/165673 – Yarin
위 예제에서 작동합니다 (적어도 53 google chrome에서) –