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  ...

所以，我想在视图中内联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的viewBox的大小吗？ 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

赏金已经（很正确）被授予，但是在我的案子中将此答案作为解决方案尚不清楚。

就我而言，ng-attr-viewBox的小写形式不合适。 here对此问题的解决方法进行了说明，并在后继重复。

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

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

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

Answer 2

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

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

如果您开始使用的外部SVG未设置viewBox，但（部分）x，y，width和height < / p>

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

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

2 个答案: