중첩 된 SVG에서 SVG-bbox를 큰 그룹

뷰포트/캔버스와 같이 하나의»root«svg를 사용하는 svg 기반 응용 프로그램을 빌드 중입니다. 이 내에서 모든 그래픽을 설정하는 하나의 SVG를로드합니다.이 그래픽은 조용합니다 (~ 18.000px * 800px, 4MB). 시차 효과를 만들려고하는데, 이는 <rect>과 같은 원시 그래픽 요소에서 작동합니다. 하지만 <g> 요소에서는 작동하지 않습니다.중첩 된 SVG에서 SVG-bbox를 큰 그룹

은 그래픽이 매우 큰 성장하고 있기 때문에 당신이 기본 설정에 대한 예제를 볼 수 아래 있도록 관련 코드를 게시하는 것은 곤란하다 : 나는의 폭에 액세스하는 데 필요한 모든에서

<svg class="root" width="1000" height="800"> 
    <g class="container" transform="matrix(1,0,0,1,<dx>,<dy>)"> 
     <svg width="16000" height="800"> 

     <!-- a lot of graphics here --> 

     <g> 
      <!-- the group with all the graphics for the parallax --> 
      <g class="parallax" transform="matrix(<crazy inkscape values here>);"> 
      </g> 
     </g> 

     <!-- a lot of graphics here --> 

     </svg> 
    </g> 
</svg>

모든 그러므로 내가 사용하고 오프셋 시차를 계산하기 위해 전체 그룹 : 폭 약 2.5 시간이 너무 큰 값을 반환 무엇

<g>.getBBox();

. DOM의 동일한 위치에서 동일한 크기로 <Rect> 그룹을 바꿨고 모든 것이 올바르게 작동합니다.

반환 된 경계 경계 상자가 증가 할 수있는 원인은 무엇입니까? <gradient>-, <symbol>- 또는 <use>- 요소일까요?

모든 아이디어에 감사드립니다.

btw : 좌표 변환은 최소한 가능한 한 여기에서 이미 고려되었습니다. 나는 FF와 Chromium에서 이것을 시험해 보았습니다 - 어디서나 같은 것을 ...

고마워요!

편집

나는 내가 오류의 원인을 발견 같아요. 이번에는 내 것이 아니 었습니다. Illustrator를 사용하여 일러스트 레이터가 그래픽을 제공했으며 원래 파일에서 빈 경로를 여러 개 발견했습니다. 실제 지점이 없더라도 0/0으로 bbox를 스팬했습니다.

출처

2014-04-14 philipp

빈 경로는 여기서 논의 된 BBOX에 기여 (여부) : http://lists.w3.org/Archives/Public/www-svg/2014Feb/0065를. html. –

다음은 전체 솔루션이라고는 생각하지 않지만 여기서는 설명을 위해 시작하겠습니다.

다음은 width = 400 height = 400 인 인라인 svg이지만 그 크기를 초과하는 요소가 포함 된 <g> 요소가 포함되어 있습니다. <g>에있는 요소를 내 400x400 인라인 svg에 맞추고 싶습니다.

이 시도 :

<!DOCTYPE html> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
     <head> 
     <title></title> 
     <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
     </head> 
     <body style='font-family:arial'> 
      <center> 
      <div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'> 
<svg id="mySVG" width="400" height="400" xmlns="http://www.w3.org/2000/svg" > 
    <g id="myG"> 
    <circle cx=1000 cy=500 r=300 fill="red" /> 
    <rect x=300 y=200 width=500 height=300 fill="blue" /> 
    </g> 
</svg> 
</div> 
<button onClick=fitG() >fit G</button> 

      <br />SVG Source:<br /> 
      <textarea id=svgSourceValue style='font-size:110%;font-family:lucida console;width:90%;height:200px'></textarea> 
      <br />Javascript:<br /> 
      <textarea id=jsValue style='border-radius:26px;font-size:110%;font-weight:bold;color:midnightblue;padding:16px;background-color:beige;border-width:0px;font-size:100%;font-family:lucida console;width:90%;height:400px'></textarea> 
      </center> 
      <div id='browserDiv' style='padding:5px;position:absolute;top:5px;left:5px;background-color:gainsboro;'>OK in:IE11/CH32/FF28<br /></div> 
<script id=myScript> 
//---button-- 
function fitG() 
{ 
    var bb=myG.getBBox() 
    var bbx=bb.x 
    var bby=bb.y 
    var bbw=bb.width 
    var bbh=bb.height 
    //---center of import--- 
    var cx=bbx+.5*bbw 
    var cy=bby+.5*bbh 
    //---create scale: ratio of desired width vs current width-- 
    var width=390 
    var scale=width/bbw 
    //---where to move it--- 
    var targetX=200 
    var targetY=200 
    //---move its center to target x,y --- 
    var transX=(-cx)*scale + targetX 
    var transY=(-cy)*scale + targetY 
    myG.setAttribute("transform","translate("+transX+" "+transY+")scale("+scale+" "+scale+")") 

    svgSourceValue.value=svgDiv.innerHTML 
} 
</script> 
      <script> 
      document.addEventListener("onload",init(),false) 
      function init() 
      { 
       svgSourceValue.value=svgDiv.innerHTML 
       jsValue.value=myScript.text 
      } 
      </script> 
     </body> 
    </html>

출처

2014-04-14 21:02:55

아, 위의 편집을 보았습니다. 문제가 발견되어 기쁩니다. –

답변 해 주셔서 감사합니다! 바운딩 박스를 만지작 거리는 것은 항상 재미있는 일입니다 ... – philipp

중첩 된 SVG에서 SVG-bbox를 큰 그룹

답변

관련 문제