文章/答案/技术大牛

发布

问动态加载svg
EN

Stack Overflow用户

提问于 2017-12-26 18:23:51

回答 1查看 39关注 0票数 0

我想要动态导入svg，我无法在我的超文本标记语言页面中显示svg我使用Angular js:我有这样的代码: Directive.js：

angular.module ('SvgMapApp') directive ('svgMap', ['$ compile', function ($ compile) {
     return {
         restrict: 'A',
         templateUrl: 'Scripts/widget.svg',
         link: function (scope, element, attrs) {
            
         }
     }
}]);

Svg.Html：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="FrontEnd/Styles.css"> 
    <link rel="stylesheet" href="Scripts/bootstrap.min.js" />

</head>
<body ng-app="SvgApplication" ng-controller="svgController">
    <h1> SVG widget</h1>
    <div class="container">
        <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"></svg>
    <div svg></div>
</div>
    <script src="Scripts/Controller.js"></script>
    <script src="Scripts/Directives.js"></script>
</body>
</html>

你有什么想法吗？

javascript

angularjs

回答 1

Stack Overflow用户

发布于 2017-12-26 19:36:53

你一开始就有很多语法错误。您的代码可能会抛出错误，并且永远不会运行。

指令声明：

angular.module ('SvgMapApp')指令('svgMap'，['$编译‘，函数($ compile) {

应该是

Angular.module(‘SvgMapApp’) service).

<div svg></div> ('svgMap'，['$'，'compile'，function ($，compile) ) {

compile应为<div svg-map></div> (如果要使用内置svgMap，[‘$’，‘compile)函数应为$compile。AngularJS将您的指令名svgMap转换为svg-map，这是您必须在模板中使用的属性，以便呈现指令。

也不会将SVG元素加载为templateUrl。您最好创建一个HTML模板并在其中内联SVG元素。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47977141

复制

相似问题

问动态加载svg
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态加载svgEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问动态加载svg
EN