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,但在某些负载上,上组的大小为零。并且什么都没有显示。第二个元素列表根本不显示,但所有元素都在该位置,并且第二个列表的所有
I Firefox 全局组大小始终为零。
有谁知道为什么浏览器没有设置合适的
附:我猜测其原因可能是父元素或 svg 视图框在设置页面布局期间设置为零,然后设置为某个值,并且出于某种原因,此后未调整
【问题讨论】:
这通常是因为您在错误的命名空间中创建元素。 你能告诉我哪个ns是正确的吗?应该如何正确完成? w3.org/2000/svg 我不知道你没有发布你用来创建元素的代码。 不,将其添加到 svg 标记没有帮助。实际上生成的 svg 是 创建 html 的代码只是从服务中获取数据数组,将其推送到 $scope 变量,然后 angular 通过循环完成它的工作遍历数组并为每个元素视图创建子问题是要在角模板中使用 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> 元素大小设置为零,尽管它有孩子[重复]的主要内容,如果未能解决你的问题,请参考以下文章