Question

我认为这很明显，我一定会遗漏一些东西，但是这个代码非常简单

<svg style="width:1000px;height:600px;border:1px solid red">
    <path d="M150 0 L75 200 L225 200 Z" />
    <text x="50" y="15" fill="red" text-anchor="end">A very long string A very long string A very long string</text>
</svg>

文本向左移动并被切断，因为其有效坐标为负。

我想重新缩放和重新缩放我的SVG内容，以便在渲染后，所有内容都可见，最左边的内容位于左边界，最右边的内容位于右边界，与顶部和底部相同。

我正在使用d3，所以在那里实现这个最终目标的任何东西都会很好。

ensureEverythingIsVisible="1"  // would be great :--)

＆＃13;

<svg style="width:1000px;height:600px;border:1px solid red">
    <path d="M150 0 L75 200 L225 200 Z" />
    <text x="50" y="15" fill="red" text-anchor="end">A very long string A very long string A very long string</text>
</svg>

＆＃13;

Answer 1

好的我找到了使用javascript的方法。我没有仔细研究过getBBox，这就是解决方案：

＆＃13;

var svg = d3.select("svg");
var svgnode = svg.node();
var bbox = svgnode.getBBox();
svg.attr("viewBox", bbox.x + " " + bbox.y + " " + bbox.width + " " + bbox.height);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg style="width:1000px;height:600px;border:1px solid red">
    <path d="M150 0 L75 200 L225 200 Z" />
    <text x="50" y="15" fill="red" text-anchor="end">A very long string A very long string A very long string</text>
</svg>

＆＃13;

根据渲染

1 个答案: