IE11为具有ng属性数据的对象添加斜切边界

Question

我遇到对象问题，原因是使用Angular.js用ng-attr-data填充对象的数据url。我的对象是svgs（动画所必需的，并且在IE中运行良好，直到更改为angular.js）

Internet Explorer使用类似iFrame的倾斜框来呈现内容，因为它最初在文档加载时找不到数据属性，并且只有在角度更改/添加属性时才找到。如果数据url是硬编码的，它可以很好地工作，并且不会在它周围设置边界

我尝试过设置border-style、border-width、outline、frameborder属性和border属性，但都不起作用。

我试图在对象标记上使用ng-if来防止它们呈现，但它的行为仍然相同（我认为是因为它在文档中，实际上并没有被排除在处理之外）。

这是有问题的元素标记：

<object ng-attr-data="{{url}}" id="svgobject" type="image/svg+xml" ></object>

Plunk演示了这个问题：http://plnkr.co/edit/3vom2L8IRNEskSnKIrfm?p=preview

这可能是一个相关问题：删除IE11 中对象元素的边框

Answer 1

我已经解决了我的问题，创建了一个角度指令将对象注入页面，从而消除了在页面加载时没有设置data="属性的对象存在的情况。该指令用对象标记替换设置的div，并将data-svname属性作为新对象的name和id属性传入。

如果chrome没有在SVG中指定名称，那么它的缓存算法会出现混乱，并用其他已经缓存的SVG随机替换页面上的SVG。

myApp.directive('injectSvg', function ($compile) {
        //Usage: 
        // <div inject-svg data-url="{{'svgfile.svg'}}" data-svgname="mysvg" class="svg"></div>
        //Replaces with SVG graphic
        return {
            link: function ($scope, $element, $attrs) {
                var el = angular.element('<object data="' + $attrs.url + '" id="' + $attrs.svgname + '" name="' + $attrs.svgname + '" type="image/svg+xml" class="' + $attrs.class + '"></object>');
                $compile(el)($scope);
                $element.replaceWith(el);

            }
        }
    });

Answer 2

刚刚遇到了同样的问题。我不确定这是否是一种100%有效的处理方法，但到目前为止，我看不到任何错误或任何东西（在Chrome、FF、Safari、IE、Edge中检查）。基本上只是添加了一个空的"数据"属性：

<object type="image/svg+xml" data="" ng-attr-data="{{url}}" id="svgobject"></object>

缺点是必须设置元素的大小，否则上会出现一些奇怪的跳跃

Answer 3

我不完全理解，但如果你想删除border，有html元素吗？您有两种选择：1-）您可以使用边框样式、边框宽度、轮廓属性或2-）你可以使用css在你的html元素上添加一个类，如下代码

<div ng-app="" class="borderless">
  Some content...
</div>

并按照代码添加样式表文件

.borderless{
  Border:none;
  /*or border:0;*/
  outline:none;
}