类似问题的解决方案涉及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 回答
viewBox
描述了要显示的SVG画布的哪个部分 . 如果在SVG根坐标中,左/上边框位于(0,0)而右/下位于(300,200),则设置viewBox="0 0 300 200"
.要设置SVG的显示大小,请使用
width
和height
. 将两者设置为100%就足以使其适合<div>
. 更好的是,它们是默认值,因此您可以将其关闭 . 请注意,HTML块没有固有高度,因此您仍需要将其限制为屏幕大小 .如果你开始使用的外部SVG没有设置
viewBox
,但是(某些)x
,y
,width
和height
将它们移动到内联元素的
viewBox
中,删除width
属性并设置与计算屏幕相关的高度:或(Angular 1.x语法)
需要解释
ng-attr-height=
解决方法here并且是原始错误消息的原因 . 对于Angular 2,请使用attribute binding:[attr.height]=