如何使用AngularJs调整SVG视口大小？

Question

如何使用AngularJs调整SVG视口大小？

5

类似问题的解决方案涉及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 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）我是否可以从$scope编程设置我的内联SVG的视口大小？2）如果不行，我如何使包含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的宽度，但只显示顶部一半，并且浏览器标签会出现垂直滚动条。

- Mawg says reinstate Monica

2个回答

2

赏金已经（完全正确地）被颁发，但将此答案作为我的情况的解决方案并不立即清晰。在我的情况下，ng-attr-viewBox被错误地转换为小写。该问题的解决方案在这里中描述，并在此为后人重复。引用如下：

如果想要修改驼峰式属性（SVG元素具有有效的驼峰式属性），例如svg元素上的viewBox，则可以使用下划线来表示要绑定到的属性自然是驼峰式的。例如，要绑定到viewBox，我们可以编写：

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

- ne1410s

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ccprog · Accepted Answer

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

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

如果您从未设置 viewBox，而是使用 (某些) x、y、width 和 height 的外部 SVG 开始，则...

<?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]=