将 SVG 输出标签显示为图像以调整大小？答案

【问题标题】：Display an SVG output tag as an image for Resizing?将 SVG 输出标签显示为图像以调整大小？
【发布时间】：2023-04-01 11:53:01
【问题描述】：

<svg id="contradictions-chart" style="width:1200px; height: 500px;"></svg> 当前显示包含许多代码生成对象的图表。我需要使图表对移动设备具有响应性/可扩展性。我的第一个想法是尝试将其渲染为图像。我试过没有成功：<img src='data:image/svg+xml;utf8,<svg id="contradictions-chart" style="width:1200px; height: 500px;"></svg>' /> 它只是显示为损坏的图像。 id="contradictions-chart" 从 /scripts/main.js 文件中提取 SVG 数据。

【问题讨论】：

标签： javascript css svg responsive-design

【解决方案1】：

解决方案是使用 viewBox：

<svg id="contradictions-chart" viewBox="0 0 1200 500" style="width:100%">

(语法：viewBox = "min-x min-y width height")

【讨论】：

【解决方案2】：

如果您知道 SVG 的纵横比将是 5:12，那么您可以利用 padding-top aspect ratio trick 响应式地显示它：

.chart-container {
  position: relative;
  padding-top: 41.66%; // 5 / 12 represented as a %
  height: 0;
  overflow: hidden;
  max-width: 100%;
}

.chart-container svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="chart-container">
    <svg id="contradictions-chart"></svg>
</div>

请注意，您需要删除 SVG 元素上的内联 style 属性才能使其正常工作。

【讨论】：

它似乎仍然想要渲染所有的 SVG 并且也没有响应：link
您是否只想渲染 SVG 中的某些路径和组？
整个 SVG。我在下面添加了一个屏幕帽到它当前呈现的内容。我试图找出一种方法来缩小它以适应手机。我的第一个想法是水平缩小它。如果看起来不正确，那么我可以按比例缩小它：link
有没有办法将整个 SVG 渲染为图像？