SVG&LT;使用&GT;在Chrome中不工作 [英] SVG <use> in Chrome doesn't work
问题描述
有是SAP(AngularJS和角度线)与SVG-精灵制作基于图标的导航。所以,我哈瓦直列code是这样的:
There is SAP (AngularJS and Angular Route) with icon-based navigation made by svg-sprite. So, I hava inline code like this:
<div style="height: 0; width: 0; position: absolute; visibility: hidden">
<svg xmlns="http://www.w3.org/2000/svg">
<symbol id="icon-grid-32" viewBox="0 0 32 32">
<g stroke-width="2" stroke-linecap="round" stroke-miterlimit="10" stroke-linejoin="round">
<path d="M2 2h11v11H2zM19 2h11v11H19zM2 19h11v11H2zM19 19h11v11H19z"/>
</g>
</symbol>
</svg>
</div>
和导航的图标是这样的:
And the icons in navigation like this:
<a href=""><svg class="icon icon-32 outline black"><use xlink:href="#icon-grid-32"></use></svg></a>
所有我可以在此导航看到的是什么,&LT;使用&GT;
的大小为0×0像素。我知道Firefox的错误使用XML:基地,但添加的xml:基础没' ŧ帮助我。你可以试试这个例子:的http:// CSS .yoksel.ru /资产/演示/ SVG-在火狐/ SVG-HAS-base.html文件
All that I can see in this navigation is nothing, <use>
has size 0 × 0 pixels. I know about Firefox bug with xml:base, but adding xml:base didn't help me. You can try this example: http://css.yoksel.ru/assets/demo/svg-in-firefox/svg-has-base.html
它工作在Firefox,Safari和其他浏览器,但无法在Chrome 49+(48版本没有这个问题)。
It works in Firefox, Safari and other browsers but not in Chrome 49+ (48 version doesn't have this problem).
推荐答案
我正经历真的类似的问题,给你一个不同的描述一下,我会产生我的图标&LT; SVG&GT;
和&LT;使用方式&gt;在指令
I was experiencing really similar issue to what you describe with a difference that I would generate my icons <svg>
and <use>
in a directive.
我一直在寻找今天的大部分时间的答案,并想出了一个变通的&LT;使用&GT;
和的xlink: HREF
的问题。它只需通过内联通缉SVG再现的功能。
I have been looking for an answer for a better part of today and came up with a workaround to the <use>
and xlink:href
question. Which simply recreates the functionality by inlining the wanted svg.
为了简单起见,假设我有&LT;角图标&GT;通过属性接收图标的名称
指令 icon-名称
For the sake of simplicity let's say i have <angular-icon>
directive that receives the name of the icon by an attribute icon-name
&LT;角图标图标名称={{someObject.iconName}}&GT;
工作指令现在看起来如下:
working directive now looks as follows:
angular.module('angularIcon', [])
.directive('angularIcon', IconDirective);
function IconDirective(){
return{
template:'',
templateNamespace:'svg',
link:function(scope, element, attributes){
// my icon name comes from $http call so it doesnt exist when initialising the directive,
attributes.$observe( 'iconName', function(iconName){
// let's grab the icon from the sprite
var icon = angular.element( document.getElementById( iconName ) );
// let's clone it so we can modify it if we want
var iconClone = icon.clone();
var namespace = "http://www.w3.org/2000/svg";
// manually create the svg element and append the inlined icon as no other way worked
var svg = document.createElementNS( namespace, 'svg' );
svg.setAttribute( 'viewBox', '0 0 32 32' );
svg.setAttribute( 'xml:space', 'preserve' );
svg.appendChild( iconClone[0] );
// let's add the newly created svg+icon to the directive's element
element[0].appendChild( svg );
});
},
scope:{
iconName: '@'
}
}
}
这篇关于SVG&LT;使用&GT;在Chrome中不工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!