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

Posted

技术标签:

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

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

<svg ng-attr-view-box="getViewbox()"
      >

    <!-- 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 通过循环完成它的工作遍历数组并为每个元素视图创建子 ...。 w3.org/2000/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

【讨论】:

以上是关于SVG <g> 元素大小设置为零,尽管它有孩子[重复]的主要内容,如果未能解决你的问题,请参考以下文章

如何设置 SVG <g> 元素的样式?

如何获取 svg:g 元素的宽度

调整 SVG 的大小以填充 div

SVG <g> 和 <text> 元素的默认宽度/边距/填充是多少?

在事件动作上突出显示 SVG <g> 中的多个路径元素

.svg 中的 <g> 元素不会在 :hover (css) 上按比例放大