带有svg图像模板的angularjs

Posted 2023-03-28

【中文标题】带有svg图像模板的angularjs

【英文标题】：angularjs with svg image template

【发布时间】：2018-11-10 07:38:26

【问题描述】：

我使用 AngularJs v1.6.10 我的 html 视图包含代码：

<script type="text/ng-template" id="animation_item_renderer.html">
<g opacity="1">
    <g ng-repeat="ctrl in control.controls">
        <g>
            <g>
                <image id="ctrl.id" xlink:href="ctrl.imageSource"
                       animation-size-item item-
                       item-
                       ng-if="ctrl.getType()===2">
                </image>
                <rect id="ctrl.id" fill="ctrl.color" 
                       ng-if="ctrl.getType()===1">
                </rect>
            </g>
        </g>
    </g>        
    <g ng-repeat="control in control.children" opacity="1" 
       ng-include="'animation_item_renderer.html'">
    </g>
</g>

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio="xMinYMin meet" viewBox="0,0,1000,700" style="background-color: ivory;font-size: 32px">
<g ng-repeat="control in vm.controls" ng-include="'animation_item_renderer.html'">

</g>

当浏览器中的 ctrl.getType()===2 显示下一个代码时：

<g>

    <!-- ngIf: ctrl.getType()===2 -->
    <!-- end ngIf: ctrl.getType()===2 -->
    <!-- ngIf: ctrl.getType()===1 -->
</g>

图片未显示。 有没有人遇到过类似的问题？

【问题讨论】：

你确定ctrl.getType()===2 ？要调试，请添加't='+ctrl.getType()。另请注意，数字 2 并不严格等于字符串 2。

@georgeawg，是的，我确定。最初我尝试使用 '' 并且图像未显示

尝试使用ng-show 而不是ng-if。 ng-if 指令添加和删除可能是 svg 问题的 HTML 节点。

【参考方案1】：

我用自定义指令解决了这个问题

directive("svgImage", [function() 
        return 
            restrict: 'E',
            replace: true,
            scope: 
                xAxis: '=',
                yAxis: '=',
                imgHeight: '=',
                imgWidth: '=',
                imgSrc:'='
            ,
            template:
                '<image xlink:href="imgSrc" ng-attr-x="xAxis" ng-attr-y="yAxis" ng-attr- ng-attr-></rect>',
            templateNamespace: 'svg'
        ;
    ]);