有没有办法从 <svg> 标签外缩放内联 SVG？

Question

我正在使用名为 rqrcode 的 Ruby gem 生成 QR 码作为 SVG，然后将其作为 API 响应发送。在前端（Vue.js）中，我需要以指定的大小显示 SVG。

现在我的代码看起来像这样，虽然它会渲染 SVG，但我无法指定大小。

<div v-html="qrCode" />

我尝试向 div 添加样式，但 SVG 完全忽略了它。为了给你一个想法，这就是它的样子：

我的理解是，您可以在<svg> 标签内使用width、height 和viewBox 来缩放SVG。 但是，无法在 rqrcode 中指定这些属性 - 高度和宽度由 gem 决定，并且开始的 svg 标记如下所示：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" width="246" height="246" shape-rendering="crispEdges">

所以我的问题是，如何从父容器指定内联 SVG 的大小以适应父容器？

[编辑澄清]如果<svg> 标记中的尺寸大于我的 div 容器，我希望 svg 缩小以适合容器。 反之亦然 - 如果尺寸更小，我希望 svg 扩展以适应容器。我不确定这是否可能。

Answer 1

您实际上可以使用 css 覆盖内联 height 和 width。

请注意，css 不需要限定范围，因此如果需要，请创建另一个样式块。

<style scoped>
  ...
</style>
<style>
div > svg {
  height: 100px;
  width: 100px;
}
</style>

Answer 2

将位置添加为相对位置并将宽度设置为 svg 类。不要忘记给 svg 一个类名。这里我假设类名是'svgClass'

div {
    height: 500px;
    width: 500px;
    border: 1px solid black;
    overflow: auto;
  position: relative; /* add this line! */
}

svg {  /* class name of the svg */
  width:100% !important;
  height:100% !important;
}