基於渲染

Question

的結果調整大小SVG內容我想這將是顯而易見的，我一定是失去了一些東西，但採取這種非常簡單的代碼

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

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

Answer 1

OK，我發現使用JavaScript的方式。我沒有看着getBBox多，這是解決方案：

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

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