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

类似问题的解决方案涉及 CSS 和img tag.

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

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

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

所以，我尝试了

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

在我看来，并且

$scope.GetSvgDivHeight = function() 
{
   height = Math.round(screen.height * 0.8);

   return height;
}

$scope.GetSvgDivWidth = function() 
{
   width = document.getElementById('SVG_goes_here').offsetWidth;

   return width;
}

在我的控制器中。

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

jquery-3.1.1.min.js:3 Error: <svg> attribute viewBox: Expected number, "0 0 {{GetSvgDivHeigh…".

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

[更新] InkScape 生成

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

当我将其更改为

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

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

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

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

如果您一开始使用的外部 SVG 未设置viewBox，但是（一些）x, y, width and height

<?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=解释了解决方法here https://docs.angularjs.org/guide/interpolation#-ngattr-for-binding-to-arbitrary-attributes这就是原始错误消息的原因。对于 Angular 2+，请使用属性绑定 https://angular.io/guide/template-syntax#attribute-binding: [attr.height]=