AngularJS指令のSVGファイルにボタンを追加しようとしています。私の問題は、ボタンのテキストが表示されていないことです。AngularJS - SVGのボタン上のテキストが表示されない
function makeElement(namespace, tag, attrs) {
var el= document.createElementNS(namespace, tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
angular.module('SvgApp').directive('svgFile', ['$compile', function ($compile) {
return {
restrict: 'A',
templateUrl: 'img/file.svg',
link: function (scope, element, attrs) {
var svgNamespace = 'http://www.w3.org/2000/svg';
var htmlNamespace = 'http://www.w3.org/1999/xhtml';
var result = makeElement(svgNamespace, "foreignObject",{"class":"point","xmlns":"http://www.w3.org/2000/svg","x":"100","y":"100","width":"300","height":"150"});
var body = document.createElement("body");
body.setAttribute("xmlns", htmlNamespace);
body.setAttribute("style", "margin: 0px; height: 100%;");
var btn = makeElement(htmlNamespace, "button", {"id":"rect3537","type":"button","style":"width:100%; height:100%;","class":"button"});
var btnSvg = makeElement(htmlNamespace, "svg", {"xmlns":"http://www.w3.org/2000/svg","version":"1.1","width":"100%","height":"100%","viewBox":"0 0 50 25"});
var btnText = makeElement(svgNamespace, "text",{"y":"75%","x":"50%","text-anchor":"middle","font-size":"20","fill":"white"});
var textNode = document.createTextNode("text");
btnText.appendChild(textNode);
btnSvg.appendChild(btnText);
btn.appendChild(btnSvg);
body.appendChild(btn);
result.appendChild(body);
console.log(result);
document.getElementById("svg-wrapper").appendChild(result);
}
}
}]);
file.svg結果変数の
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
version="1.1"
width="100%"
height="100%"
id="svg-wrapper">
</svg>
値:それはテキストなしで私だけの空のボタンを示し、なぜ私にはわからない
<foreignObject class="point" xmlns="http://www.w3.org/2000/svg" x="100.0000000000000" y="100.0000000000000" width="300" height="150">
<body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px; height: 100%;">
<button id="rect3537" type="button" style="width:100%; height:100%;" class="btn btn-primary ng-scope">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="100%" viewbox="0 0 50 25">
<text y="75%" x="50%" text-anchor="middle" font-size="20" fill="white">text</text>
</svg>
</button>
</body>
</foreignObject>
ここに私のコードです。これは間違っているように私には見えるクローム52とFirefox 48に