时间戳

首页 > 解决方案 > 使用视图框的响应式 SVG

javascript - 使用视图框的响应式 SVG

问题描述

我已经设法通过使用这样的视图框使 SVG 响应：

var svg = d3.select("#vis").append("svg") 
            .attr("width", "100%")
            .attr("height", "100%") 
            .attr("viewBox", "0 0 960 500")
            .attr("preserveAspectRatio", "none");

它具有响应性并且随着屏幕尺寸变小而变小。唯一的问题是 SVG 在最大屏幕中加载时太大。我可以设置最大尺寸吗？因此，即使屏幕很大，一旦达到最大尺寸，它也不会变得太大。

标签： javascriptd3.jssvgresponsiveviewbox

解决方案

为什么不使用 CSS 为容器提供最大宽度？

var svg = d3.select("#vis").append("svg")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("viewBox", "0 0 960 500")
  .attr("preserveAspectRatio", "none");
  
svg.append('circle')
  .attr('r', 100)
  .attr('cx', 300)
  .attr('cy', 300)
#vis {
  max-width: 960px;
  margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="vis"></div>

推荐阅读