Question

我有一个使用d3创建的SVG图像。我想在它的父div容器中包含svg图像。然而，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图表超出了父母＆＃34;测试＆＃34; 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');

可以使用绝对或相对单位使用CSS设置svg元素本身的大小。

viewBox属性定义SVG内部坐标系的边界。使矢量图像的内容为＆＃34;全尺寸＆＃34;它不应该大于包含SVG的所有元素所必需的。

SVG D3图像调整大小问题

1 个答案: