SVG—从嵌套的 svg 到大的组的 bbox答案

【问题标题】：SVG—bbox to large for group from nested svgSVG—从嵌套的 svg 到大的组的 bbox
【发布时间】：2014-05-28 18:37:48
【问题描述】：

我正在构建一个基于 svg 的应用程序，它使用 »root« svg 作为 Viewport/Canvas。在这个中，我加载了一个设置所有图形的 SVG，那个非常大（~18.000px * 800px，4MB）。我正在尝试创建视差效果，该效果适用于<rect> 等原始图形元素。但它不适用于<g> 元素。

相关代码很难贴，因为图形已经很大了，所以下面你可以看一个基本设置的例子：

<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>

总而言之，我需要访问整个组的宽度来计算视差偏移量，因此我使用的是：

<g>.getBBox();

what 返回一个宽度大约为2.5 倍的值。我用<Rect> 在 DOM 中的同一位置替换了该组，一切正常。

什么可能导致返回的边界框变大，可能是<gradient>-、<symbol>- 或<use>- 元素？

我很欣赏任何想法。

顺便说一句：这里已经考虑到坐标的转换，至少是尽可能的。我在 FF 和 Chromium 中对此进行了测试——到处都是一样的……

提前谢谢！

编辑

我想我找到了错误的原因。这一次不是我的。图形是由 Illustrator 提供的，使用 Illustrator，在原始文件中我发现了几个空路径。他们将 bbox 跨越到 0/0，即使那里没有真正的点......

【问题讨论】：

对 bbox 有贡献（或没有）的空路径已在此处讨论：lists.w3.org/Archives/Public/www-svg/2014Feb/0065.html。

标签： svg bounding-box

【解决方案1】：

我不认为以下是完整的解决方案，但让我们从这里开始讨论。

以下是宽度=400 高度=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>

【讨论】：

啊，我在上面看到了你的编辑。好的，很高兴您发现了问题
感谢您的回答！摆弄边界框本身就是一种乐趣……