Question

我一直有一个问题我无法理解，我已经尝试了很多不同的修补程序，大多数是viewBox 0 0 x x种width=""和{{1}修改（删除宽度和高度，这是我从未有过的）。

基本上，我使用Angular ng-nepeat构建一行特定颜色的SVG，这部署在一个专有的可视化网站（PIVision）中，该网站将HTML页面部署为可拖动的可调整大小的对象。我不认为因此与此问题有关，但信息可能有所帮助。

在Chrome中，我的HTML符号显示得非常好：Nice SVG 然而，在IE中，符号显示巨大，并且没有调整大小或缩放，如容器调整大小框中所示：IE's SVG

下面是我的HTML，因为我不认为这是一个脚本问题，但是如果需要我试图创建一个JSFiddle（但是没有正常工作，我相信它与我的Angular JS有关）在JSFiddle中设置，因为公司使用的实现是预先构建的，略有不同，道歉）。

HTML：

height=""

是否可以解决此问题，或者我是否必须使用彩色<div ng-style="{'height': config.Height, 'width':config.Width}" style="cursor:pointer" > <table style="height:100%; width:100%"> <tr style="width:100%; height:100%" id="theTableRow"> <td ng-attr-title="{{getSortedValue($index)}}" ng-style="{'width':theCircleWidth + '%', 'padding':'0.3%'}" ng-repeat="n in config.makeCounterArray(config.columnMax) track by $index"> <svg ng-if="sortedListOfValues[$index].elementName.charAt(0) == 'P'" style="filter:url(#dropshadow);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100"> <circle cx="50" cy="50" r="45" ng-attr-stroke="{{config.stateColours[getSortedValue($index)]}}" stroke-width="4" ng-attr-fill="{{config.stateColours[getSortedValue($index)]}}" /> </svg> <svg ng-if="sortedListOfValues[$index].elementName.charAt(0) == 'H'" style="filter:url(#dropshadow);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 100 100"> <rect height="100" width="100" ng-attr-stroke="{{config.stateColours[getSortedValue($index)]}}" stroke-width="4" ng-attr-fill="{{config.stateColours[getSortedValue($index)]}}" /> </svg> </td> </tr> </table> </div> div来完成我想要的工作？

提前感谢您提出的任何帮助，对问题的任何问题道歉，这是我的第一个！

编辑：在更改表格以包含border-radius之后，它会更好地缩放，但是我在表格上面有这个奇怪的空间，在第一条评论中链接。

Answer 1

直接嵌入文档时，SVG受CSS限制，不同的浏览器只有不同的默认渲染。

试试这个：

svg {
    max-width: 100%;
    max-height: 100%;
}

用于新的默认样式。在特定情况下根据需要调整它们的大小。

Internet Explorer中的SVG Scaling Giant，适用于Chome（AngularJS）

1 个答案: