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>元素大小設置爲零，儘管它有孩子

回答

相關問題