javascript - SVG D3 图像调整大小问题

Question

我有一个使用 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 图形。

Answer 1

老实说，不知道从哪里开始。您提供的代码片段是自己的，有许多问题阻止它在我这边做任何事情。

我希望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 的所有元素所需的大小。