svg - D3js：如何垂直拉伸对象？

Question

我得到了一张纬度/经度投影的地图，考虑到更高的纬度，它变得相当平坦，例如：

为了让它看起来不错，我知道我可以将它垂直拉伸 140%，例如：

另外，我如何使用 D3 拉伸我的 SVG 元素及其内容？（我不能使用 CSS，因为底层 SVG 本身就不好。我需要拉伸 SVG 代码，允许下载）

注意：对于在线代码示例，我目前得到了印度（印度只需要 106% 的拉伸，但同样的想法）。

Answer 1

在 SVG 中，可以通过设置一个 transform 属性来缩放元素。所以拿你的形状容器做

container.setAttribute("transform", "scale(1, 1.4)");

您需要有一个可变形的容器，例如一个<g>元素。元素在 SVG 1.1 中不可<svg>转换，但将在即将到来的 SVG 2 规范中。据我所知，目前只有 Firefox 和 Opera 支持 SVG 2 的这一部分。

如果您想使用 SVG 1.1 UA 在印度地图上进行这项工作，因为您没有可转换的容器，您可以在每个路径和文本元素上设置转换，例如

<svg>
  <path transform="scale(1, 1.4).../>
  <path transform="scale(1, 1.4).../>
  <text transform="scale(1, 1.4).../>
</svg>

你必须遍历元素的子<svg>元素才能做到这一点。

或者，您可以<g>在层次结构中插入一个元素，即

<svg>
  <path .../>
  <path .../>
</svg>

会成为

<svg>
  <g transform="scale(1, 1.4)">
    <path .../>
    <path .../>
  </g>
</svg>

您将遍历 的所有子元素<svg>并将它们重新设置为该<g>元素，然后在该<g>元素上设置一个变换。