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

Posted 2023-02-22

【中文标题】有没有办法从 <svg> 标签外缩放内联 SVG？

【英文标题】：Is there a way to scale an inline SVG from outside the <svg> tag?

【发布时间】：2021-04-18 02:59:43

【问题描述】：

我正在使用名为 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 扩展以适应容器。我不确定这是否可能。

【问题讨论】：

对于 div，将位置更改为相对...在 div 样式中指定高度和宽度

对于 svg 类，将高度和宽度设置为 100%

而不是width="246" height="246" 使用viewBox="0 0 246 246"

@enxaneta 正如我在问题中所写，我无法设置width、height 或viewBox，因为<svg> 标签内的所有内容都是由rqrcode 自动生成的宝石。我的问题是您是否可以从其父容器缩放 SVG。

然后使用javascript摆脱width和height并设置viewBox，正如enxaneta所说，这是你问题的根本原因

【参考方案1】：

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

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

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

</style>

【讨论】：

谢谢，我试过了，它已经完成了一半 - SVG 元素现在具有指定的高度和宽度。问题是，它没有缩放。如，如果<svg> 标记中的width 和height 是200px，并且我在CSS 中指定100px，就像上面的代码一样，它只显示SVG 的左上角。有什么想法吗？

@camaulay 谢谢，我认为这个解决方案不起作用，因为 SVG 的内部也有固定的宽度/高度，但否则你的解决方案就可以了。我接受答案。

【参考方案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;

【讨论】：

我认为没有办法向 SVG 添加类，因为我使用的是从 API 接收的 SVG 代码。如果我遗漏了什么，请告诉我。

没关系....只是将样式设置为 svg 本身...请检查我编辑的答案

将position: relative; 添加到div 容器和max-width:100%; 到svg，但这会导致与其他解决方案相同的问题 - 如果 SVG 大于div 的尺寸。理想情况下，我希望 svg 缩小到 div 的大小，或者如果不够大则增大。

我添加了 !important...检查我编辑的答案

同样的结果，SVG 被截断而不是缩小以适应容器的大小：/