代码笔示例:http://codepen.io/mattrice/full/peXeqd/
我想要的是 SVG 完全包含在父级的给定宽度内(本例为 6 列,但可以是任何其他任意宽度的网格元素)。
此示例在宽度 <768px 时按预期运行,因为 Bootstrap 列是整页宽度;但是,当 Bootstrap 列回流到宽度超过 768 的水平堆叠时,SVG 会占据页面的整个宽度。
我认为问题源于 render()
中 updateDimensions()
的参数:
function render() {
updateDimensions(window.innerWidth);
...<snip>...
}
我也尝试过 getBoundingClientRect()
像这样
function render() {
updateDimensions(d3.select(options.selector).node().getBoundingClientRect().width);
...<snip>...
}
但这导致了一些奇怪的结果(可能超出了这个问题的范围)。
我该如何解决这个问题?
最佳答案
如果您希望 SVG 缩放以适合其父元素,则它需要具有 viewBox
属性。
不要设置 SVG 的宽度
和高度
,而是将这些值用于viewBox
。
改变
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom);
至
.attr("viewBox", [0, 0, (width + margin.right + margin.left),
(height + margin.top + margin.bottom)].join(' '))
如果需要,您可能需要调整 viewBox
的宽度和高度组件,以消除右侧的间隙,使其更加整齐。
关于javascript - 修复响应式 SVG 脱离 Bootstrap 网格的问题?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43286666/