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

Question

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

Answer 1

如果您知道 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 属性才能使其正常工作。

Answer 2

解决方案是使用 viewBox：

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

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

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

Display an SVG output tag as an image for Resizing?

javascript

css

svg

responsive-design