如何使用 AngularJs 调整 SVG 视图框的大小？答案

【问题标题】：How to size an SVG viewBox with AngularJs?如何使用 AngularJs 调整 SVG 视图框的大小？
【发布时间】：2018-01-16 03:30:53
【问题描述】：

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

但是，我不能使用<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 视图框的大小，因为（重要）整个想法是我希望能够以任何分辨率显示网页，并让 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) 我可以从$scope 以编程方式设置我的内联SVG 视图框的大小吗？ 2) 如果没有，我如何制作包含 Angular 指令的 inline 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 的宽度，但仅显示上半部分，并且浏览器选项卡会增长一个垂直滚动条。

【问题讨论】：

标签： angularjs svg

【解决方案1】：

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

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

如果您开始使用未设置 viewBox 的外部 SVG，但（部分）设置为 x、y、width 和 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">

here 解释了ng-attr-height= 解决方法的必要性，这也是原始错误消息的原因。对于 Angular 2+，使用 attribute binding: [attr.height]=

【讨论】：

这是我读过的对 viewBox 最清晰的描述。但是，当我将高度设置为 100% 时，只显示图像的上半部分。请参阅问题的更新（在底部）。听起来你可以帮我做一个简单的修正（手指交叉）。
aah 是的...div 没有固有高度...您必须设置 div 或 SVG 高度。我将编辑我的答案。
从你的函数中返回height + "px"。 Angular 对于它认为是有效的 HTML 是非常奇怪的。
我从未使用过 Angular v2+，但我刚刚看到 this 语法：[attr.height] ="fn()"（暗中刺伤）
我想我找到了：docs.angularjs.org/guide/…

【解决方案2】：

赏金已经（非常正确地）被授予，但是在我的案例中添加这个答案作为解决方案并不是很清楚。

在我的例子中，ng-attr-viewBox 被不恰当地小写了。对此的解决方案在here 中进行了描述，并在此重复以供后代使用。

如果想要修改一个驼峰式属性（SVG 元素具有有效的 camelcased 属性），例如 svg 元素上的 viewBox，可以使用下划线表示要绑定的属性自然是骆驼。

例如，要绑定到 viewBox，我们可以这样写：

<svg ng-attr-view_box="{{viewBox}}"> </svg>

【讨论】：