如何使用 AngularJs 调整 SVG viewBox 的大小？

Question

类似问题的解决方案涉及 CSS 和img标签。

\n\n

但是，我无法使用，<img src="myFile.svg">因为 SVG 包含 Angular 指令，例如

\n\n

  <path id="Top row 1" ng-click=\'RoomClicked($event, "A-1")\'\n        fill={{GetFillColour(\'A-1\')}} stroke="black" stroke-width="1"\n        d="M 226.00,69.00\n           C 226.00,69.00 226.00,136.00 226.00,136.00  ...\n

\n\n

因此，我认为将 SVG 内联在视图中，并根据其容器调整 SVG viewBox 的大小，因为（重要）整个想法是我希望能够以任何分辨率显示网页并具有SVG 比例以适合其父级DIV。

\n\n

所以，我尝试了

\n\n

<div>\n    <svg xmlns="http://www.w3.org/2000/svg"         \n         viewBox="0 0 {{GetSvgDivHeight()}} {{GetSvgDivWidth()}}">\n

\n\n

在我看来，并且

\n\n

$scope.GetSvgDivHeight = function() \n{\n   height = Math.round(screen.height * 0.8);\n\n   return height;\n}\n\n$scope.GetSvgDivWidth = function() \n{\n   width = document.getElementById(\'SVG_goes_here\').offsetWidth;\n\n   return width;\n}\n

\n\n

在我的控制器中。

\n\n

但是，SVG 不显示，开发者控制台显示

\n\n

jquery-3.1.1.min.js:3 Error: <svg> attribute viewBox: Expected number, "0 0 {{GetSvgDivHeigh\xe2\x80\xa6".\n

\n\n

那么，1）我可以通过编程方式设置我的内嵌 SVG viewBox 的大小吗$scope？2）如果没有，我怎样才能制作包含Angular指令的内联SVG，填充其父DIV，并在调整该DIV大小时调整大小？

\n\n

---

\n\n

[更新] InkScape 生成

\n\n

<svg xmlns="http://www.w3.org/2000/svg"\n     width="7.22222in" height="10.0444in"\n     viewBox="0 0 650 904">\n

\n\n

当我将其更改为

\n\n

<svg xmlns="http://www.w3.org/2000/svg"\n     height="100%"\n     viewBox="0 0 650 904">\n

\n\n

图像填充了包含 DIV 的宽度，但仅显示上半部分，并且浏览器选项卡会出现垂直滚动条。

\n

Answer 1

viewBox描述要显示 SVG 画布的哪一部分。如果在 SVG 根坐标中，左/上边框位于 (0,0)，右/下边框位于 (300,200)，则设置viewBox="0 0 300 200"。

要设置SVG 的显示width大小，请使用和height。将两者设置为 100% 足以使其适合<div>. 更好的是，它们是默认值，因此您可以将其保留。请注意，HTML 块没有固有高度，因此您仍然需要将其限制为屏幕尺寸。

如果您一开始使用的外部 SVG 未设置viewBox，但（某些）x、y和widthheight

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">

将它们移动到viewBox内联元素中，删除width属性并设置计算的屏幕相关高度：

<div style="position:relative;height:{{GetSvgDivHeight()}}">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 200">

或（Angular 1.x 语法）

<div>
    <svg xmlns="http://www.w3.org/2000/svg"
         ng-attr-height="{{GetSvgDivHeight()}}" viewBox="0 0 300 200">

此处ng-attr-height=解释了解决方法的必要性，这也是原始错误消息的原因。对于 Angular 2+，使用属性绑定：[attr.height]=