相关疑难解决方法(0)

我已经将圈元素添加到iFrame中显示的svg中.Chrome没有显示新元素,尚未尝试FF.我需要调用一些重绘/刷新吗？第一个圆圈实际上是在svg文档中,其余的来自脚本.

<iframe id="svgFrame" src="xmlfile1.svg" width="300" height="300">
<svg xmlns="http://www.w3.org/2000/svg" id="SVG1" width="200" height="200">
   <circle cx="20" cy="20" r="5"/>
   <circle cx="165" cy="80" r="32"/>
   <circle cx="15" cy="38" r="32"/>
   <circle cx="140" cy="39" r="30"/>
   <circle cx="178" cy="32" r="22"/>
   ...etc
   <circle cx="166" cy="130" r="16"/>
</svg>
</iframe>

创建元素的javascript:

function RandomNumber(min, max) {
    var r;
    r = Math.floor(Math.random() * (max - min + 1)) + min;
    return r;
}

var svg = document.getElementById("svgFrame").contentDocument;

for (var i = 0; i < 99; i++) {

    var n = svg.createElement("circle");
    n.setAttribute("cx" , RandomNumber( …

在HTML中,我可以通过提供字符串形式的模板来构建一个简单的模板系统,替换它的某些部分,然后将其分配innerHTML给某个容器.

var templ = '<span>{myText}</span>'
var newContent = templ.replace( '{myText}', someVariable );
document.querySelector( '#myContainer' ).innerHTML = newContent;

这样我就可以利用浏览器的HTML解析器,而不必重复使用document.createElement().如果模板超出一些元素,那么后者可能非常麻烦.

然而,在SVG中,元素上没有属性,innerHTML甚至也没有属性innerSVG.

所以我的问题是:我在SVG中可以使用的任何内容类似于上面示例中的方法,还是我坚持使用document.createElement()(或者某些使用它的lib)？

_{与我的问题一样:Vanilla JavaScript解决方案是首选,但任何提供解决方案的lib的指针都是值得赞赏的.}

我有兴趣通过组合Angular.js指令中包含的可重用图形元素来构建复合SVG.例如,我可能有:

<div ng-app="svgApp">
  <canvas>
    <drawing ng-repeat="i in [1,2,3]" cy="{{i * 40}}"></drawing>
  </canvas>
</div>

我在哪里定义以下指令:

  .directive('canvas', function () {
    return {
      template: '<svg height=200 width=100 ng-transclude></svg>',
      restrict: 'E',
      replace: true,
      transclude: true
    };
  })

  .directive('drawing', function () {
    return {
      template: '<circle cx=50 r=15></circle>',
      restrict: 'E',
      replace: true
    };
  })

问题是SVG元素似乎没有被正确地转换.一个线索似乎就在这里,在另一个StackOverflow问题中,这主要是因为在Angular.js中没有正确创建SVG节点.

在进一步探讨之后,我找到了这个解决方案,它涉及使用辅助函数用正确创建的SVG节点替换相关的DOM元素,a:

  .value('createSVGNode', function(name, element, settings) {
      var namespace = 'http://www.w3.org/2000/svg';
      var node = document.createElementNS(namespace, name);
      for (var attribute in settings) {
        var value = settings[attribute];
        if …

我正在尝试创建我将在svg元素中使用的AngularJS指令.
该指令不创建svg元素,但使用存在的元素.我可以在开发工具中看到正确的svg标记,但浏览器不会显示它.

请看实时示例.

这是指令:

angular.module('ui.directives', []).directive('svgText', 
    function() {
      return {
        restrict: 'E',
          replace: true,
          template: '<text fill="green" x="4" y="20" font-weight="bolder" font-size="2" font-family="Arial">89</text>'
      };
    }
  );