SVG <g>元素大小设置为零，尽管它有孩子

我添加了一些元素svg包含一个大组。该组的基本代码如下所示：页面加载SVG <g>元素大小设置为零，尽管它有孩子

<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标签设置正确坐标和大小。

我的Firefox全局组大小始终为零。

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

P.S.我在设置页面布局和出于某种原因<克>后，这是不调整该原因可能是父元素或SVG视图框设置为零，然后以一定的价值猜测。但我不知道如何调试它。

来源

2016-12-28 Dmytro

这通常是因为你正在创建错误的命名空间的元素。 –

能否请你告诉我哪NS是正确的？它应该如何正确地完成？ – Dmytro

http://www.w3.org/2000/svg我不知道你有没有发布的代码你使用创建的元素。 –

问题是，在角度模板中使用svg元素应该为每个模板指定适当的模板名称空间。这应该使用templateNamespace指令参数例如这样进行：

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

详情参见这个问题：Including SVG template in Angularjs directive

来源

2016-12-28 20:40:04 Dmytro

SVG <g>元素大小设置为零，尽管它有孩子

回答

相关问题