假设我有一排3个图标,每个图标都是20px x 20px,然后是一些链接(无论链接文本有多宽),然后是另两个链接。我使用flexbox来分隔元素,我想要的是元素之间的空间均匀分布。实际发生的情况是,svg将增加其大小以占用整个空闲空间。
我尝试过从svg中提取高度和宽度属性,但图像完全消失了。我也尝试过包装器div,但svg会强制它占用剩余的空间。
我在FreeCodeCamp上开始了D3.js的挑战,问题是我用图表解决了这个问题,但它只给我一个直肠显示,只有一个显示它的宽度和高度,我将显示下面的代码。
整个代码
<script>
//set d3
var w = 1000, h = 500;
var padding = 50;
var svg = d3.select('body')
.append('svg')
.attr('width', w)
假设我有一个构建960500SVG图形的直方图脚本。我如何使其响应,以便调整图形的宽度和高度是动态的?
<script>
var n = 10000, // number of trials
m = 10, // number of random variables
data = [];
// Generate an Irwin-Hall distribution.
for (var i = 0; i < n; i++) {
for (var s = 0, j = 0; j < m; j++) {
s += Math.random
我想出了两种使SVG中的元素相对于SVG的父元素或SVG本身具有响应大小的方法(SVG的高度是100% ):
使用CSS变量更改CSS中的高度
- **Works in Firefox but not Chrome, and I have no idea why?**
通过获取SVG的父级高度来更改JS中的高度
- Works in Firefox and Chrome, but as much as possible I would like the resizing logic to be all in one place (i.e. CSS