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

Question

类似问题的解决方案涉及 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  ...

所以，我想在 View 中内联 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;
}

在我的 Controller 中。

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

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

那么，1) 我可以通过编程方式设置我的内联 SVG viewBox 的大小吗，来自 $scope ？ 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 的宽度，但只显示了上半部分，并且浏览器选项卡增长了一个垂直滚动条。

Answer 1

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

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

如果您开始使用未设置 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">

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