首页 文章

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

提问于
浏览
2

类似问题的解决方案涉及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的大小,因为( important )整个想法是我希望能够以任何分辨率显示网页并且具有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指令的 inline 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的宽度,但只有上半部分显示,浏览器选项卡会生成垂直滚动条 .

1 回答

  • 1

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

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

    如果你开始使用的外部SVG没有设置 viewBox ,但是(某些) xywidthheight

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

相关问题