如何使用AngularJS调整SVG视图框的大小？

Question

但是，我不能使用，因为SVG包含角度指令，例如

  <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的容器来调整它的大小，因为（重要的）整个想法是，我希望能够以任何分辨率显示web页面，并且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…".

<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的宽度，但只显示上半部分，浏览器选项卡会生成一个垂直滚动条。

Answer 1

相关问题

Answer 2

viewbox描述要显示SVG画布的哪一部分。如果在SVG根坐标中，左/上边框在（0,0）处，右/下边框在（300,200）处，则设置viewbox=“0 0 300 200”。

若要设置SVG的显示大小，请使用宽度和高度。将两者都设置为100%就足以使其适合

。更好的是，它们是默认值，所以您可以不使用它们。请注意，HTML块没有固有的高度，因此您仍然需要将其限制为屏幕大小。

如果一开始使用外部SVG，该SVG不设置ViewBox，但设置（部分）X、Y、宽度和高度

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

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

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

or（角度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]=