在CSS中重新缩放SVG

Rescale an SVG in CSS

本文关键字：缩放 SVG 新缩放 CSS      更新时间：2023-09-26

我有一个在illustrator中为960pt x 960pt的艺术盒制作的SVG。我想把它插入一个次等尺寸的网页。

我试着遵循以减少它，但它像下面的jsfiddle一样被裁剪：http://jsfiddle.net/4tjoevqo/

d3js:

var svg = d3.select("body")
          .append('svg')
          .attr('width', '960px')
          .attr('height', '960px');
svg.append('g').append('circle')
  .attr('cx', 480)
  .attr('cy', 480)
  .attr('r', 284.5);

CSS：

svg {
    width: 400px;
    height: 400px;
}

如何在不裁剪的情况下重新缩放？非常感谢

哇，我花了一段时间才弄清楚你做错了什么。首先，viewBox具有大写B。所以你得到

.attr("viewBox",'0 0 1000 1000');

注意，我声称它必须用空格而不是逗号。事实并非如此，我的错，根据规范：

由空白和/或逗号分隔

只是规范总是使用空格。。。

请参见此处：http://jsfiddle.net/4tjoevqo/1/

相关文章：