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

问题描述

解决类似问题的方法涉及CSS和img标记.

Solutions to similar questions involve CSS and the img tag.

但是，我不能使用<img src="myFile.svg">，因为SVG包含Angular指令，例如

However, I cannot use the <img src="myFile.svg"> because the SVG contains Angular directives, such as

  <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的大小，因为( important )我希望能够以任何分辨率显示网页并具有SVG比例以适合其父DIV.

So, I thought to have the SVG inline, in a view, and to size the SVG viewBox according to its its container, because (important) the whole idea is that I want to be able to display the web page at any resolution and have the SVG scale to fit it's parent 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没有显示，并且开发者控制台显示了

But, the SVG does not show, and the developer console shows

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

因此，1)我可以从$scope以编程方式设置SVG行中的viewBox的大小吗? 2)如果没有，我如何制作包含Angular指令的 inline SVG，填充其父DIV，并在调整DIV大小时重新调整其大小?

So, 1) can I set the size of my in line SVG's viewBox programactically, from $scope? 2) if not, how can I make the inline SVG, containing Angular directives, fill its parent DIV, and resize if that DIV is resized?

[更新]生成的InkScape

[Update] InkScape generated

<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的宽度，但仅显示了上半部分，并且浏览器选项卡上出现了垂直滚动条.

The image fills the width of the containing DIV, but only the top half shows and the browser tab grows a vertical scroll bar.

推荐答案

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

viewBox describes which part of the SVG canvas to display. If, in SVG root coordinates, the left/upper border is at (0,0) and the right/lower at (300,200), set viewBox="0 0 300 200".

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

To set the display size of the SVG, use width and height. Setting both to 100% suffices to make it fit into the <div>. Even better, they are the default values, so you can leave them off. Note that HTML blocks have no intrinsic height, so you still need to restrict that to screen size.

如果您从未设置viewBox而是设置x，y，width和height

If you start out with a external SVG that does not set viewBox, but (some of) x, y, width and height

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

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

move them into the viewBox for the inline element, remove the width attribute and set the computed screen-related height:

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

或(Angular 1.x语法)

or (Angular 1.x syntax)

<div>
    <svg xmlns="http://www.w3.org/2000/svg"
         ng-attr-height="{{GetSvgDivHeight()}}" viewBox="0 0 300 200">

此处，这是原始错误消息的原因.对于Angular 2+，请使用属性绑定:[attr.height]=

The need for the ng-attr-height= workaround is explained here and was the reason for the original error message. For Angular 2+, use attribute binding: [attr.height]=

这篇关于如何使用AngularJs调整SVG viewBox的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！