SVG <g> 元素大小设置为零，尽管它有孩子[重复]答案

【问题标题】：SVG <g> element size is set to zero despite it has children [duplicate]SVG <g> 元素大小设置为零，尽管它有孩子[重复]
【发布时间】：2017-05-12 15:14:20
【问题描述】：

我向包含一个大组的 svg 添加了一些元素。该组的基本代码如下所示：

<svg ng-attr-view-box="{{getViewbox()}}"
     width="100%" height="100%">

    <!-- This will be global group element I refer below -->
    <g ng-transclude></g>    
</svg>

当页面刚被加载后，它会请求显示元素列表（实际上是几个列表），然后将元素添加到页面中。每个元素看起来像：

<g class="element-view">
    <circle ng-attr-cx="{{model.x}}"
            ng-attr-cy="{{model.y}}"
            style="fill:blue"
            r="4">
    </circle>
    <path ng-attr-d="....">
    </path>
</g>

在 Chrome 中，尽管所有元素都已正确加载并添加到 DOM，但在某些负载上，上组的大小为零。并且什么都没有显示。第二个元素列表根本不显示，但所有元素都在该位置，并且第二个列表的所有元素的大小也为 0，尽管子 svg 标签已正确设置了坐标和大小。

I Firefox 全局组大小始终为零。

有谁知道为什么浏览器没有设置合适的元素大小？

附：我猜测其原因可能是父元素或 svg 视图框在设置页面布局期间设置为零，然后设置为某个值，并且出于某种原因，此后未调整的大小。但我不知道如何调试它。

【问题讨论】：

这通常是因为您在错误的命名空间中创建元素。
你能告诉我哪个ns是正确的吗？应该如何正确完成？
w3.org/2000/svg 我不知道你没有发布你用来创建元素的代码。
不，将其添加到 svg 标记没有帮助。实际上生成的 svg 是创建 HTML 的代码只是从服务中获取数据数组，将其推送到 $scope 变量，然后 angular 通过循环完成它的工作遍历数组并为每个元素视图创建子 ...。

标签： javascript html css angularjs svg

【解决方案1】：

问题是要在角模板中使用 svg 元素，应该为每个模板指定适当的模板命名空间。这应该使用 templateNamespace 指令参数来完成，例如：

.directive('cuiPluginview', function () {
    return {
        restrict: 'E',
        templateUrl: '/components/views/module/view.html',
        templateNamespace: 'svg',
        replace: true,

有关更多信息，请参阅此问题：Including SVG template in Angularjs directive

【讨论】：