我有一个使用 d3 创建的 SVG 图像。我想将 svg 图像包含在它的父 div 容器中。然而,svg 超出了父 div 的范围。下面是我的代码:
<div id="test" style="{width: 500px; height:500px;}">
<svg></svg>
</div>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height"),
node,
link;
svg.append('defs').append('marker')
.attrs({'id':'arrowhead',
'viewBox':'-0 -5 10 10',
'refX':13,
'refY':0,
'orient':'auto',
'markerWidth':13,
'markerHeight':13,
'xoverflow':'visible'})
.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#999')
.style('stroke','none');
</script>
我的 d3 图超出了父级“测试”div。如何限制父容器内的 SVG 图形。
最佳答案
老实说,不知道从哪里开始。您提供的代码片段是自己的,有许多问题阻止它在我这边做任何事情。
我希望this为您提供有关如何将 svg 缩放到父容器尺寸的基本概念:
html
<div id="test">
<svg></svg>
</div>
CSS
#test {
width: 500px;
height: 500px;
}
svg {
width: 100%;
height: 100%;
}
js
var svg = d3.select("svg");
svg.attr('viewBox', '-0 -5 10 10');
svg.append('svg:path')
.attr('d', 'M 0,-5 L 10 ,0 L 0,5')
.attr('fill', '#999')
.style('stroke','none');
svg 元素本身的大小可以使用绝对或相对单位通过 CSS 设置。
viewBox 属性定义 SVG 内部坐标系的边界。为了使矢量图像的内容具有“完整尺寸”,它不应大于包含 SVG 的所有元素所需的大小。
关于javascript - SVG D3 图像调整大小问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47543565/