AngularJS - Text auf Button in SVG nicht angezeigt

Ich versuche, eine Schaltfläche zu SVG-Datei in AngularJS-Direktive hinzuzufügen. Mein Problem ist, dass der Schaltflächentext nicht erscheint. Hier ist mein Code:AngularJS - Text auf Button in SVG nicht angezeigt

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>

Wert der Ergebnisgröße:

<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>

Ich weiß nicht, warum es mir nur leere Schaltfläche ohne Text zeigt. Getestet auf Chrome 52 und Firefox 48.

Quelle

2016-08-04 D. Wiśniewski

mir Sieht aus wie dies falsch ist, müssen Sie die svgNamespace als erstes Argument

var btnSvg = makeElement(htmlNamespace, "svg", {"xmlns":"http://www.w3.org/2000/svg","version":"1.1","width":"100%","height":"100%","viewBox":"0 0 50 25"});

xmlns ist kein Attribut, das Sie setzen sollte, ist es eine Folge des Namens des Elements so dass ich glaube, Sie wollen diese ...

var btnSvg = makeElement(svgNamespace, "svg", {"width":"100%","height":"100%","viewBox":"0 0 50 25"});

Quelle

2016-08-04 06:27:44

der SVG-Code in Folge erscheint (siehe unten) zu arbeiten, so ist meine Vermutung es Ursache entweder von CSS-Regeln oder möglicherweise Konflikte aus mehreren <body> Tags und irrelevante xmlns-Deklarationen . Sehen Sie sich Ihren Inspector in einer gerenderten Version an und schauen Sie, ob Sie feststellen können, ob der Text aufgrund von Positions- oder CSS-Konflikten verborgen ist.

.point { 
 
width: 300px; 
 
height: 150px; 
 
}

<div class="point"> 
 
     <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> 
 
</div>

Quelle

2016-08-04 07:04:19 JustH

AngularJS - Text auf Button in SVG nicht angezeigt

Antwort

Verwandte Themen