2016-01-25 13 views
6

Ich kann ein Rechteck und Text auf dem Bildschirm sehen, so scheint die Markup korrekt zu sein, aber im Editor gibt es eine blaue Squiggly und die Nachricht, dass die Tags werden nicht erkannt. Es scheint für alle SVG-bezogenen Elemente der Fall zu sein.Visual Studio 2015 erkennt nicht Svg, Rect, G, Kreis usw.

<svg width="400" height="400"> 
    <g transform="translate(0,0)"> 
    <rect width="5" height="5"></rect> 
    <circle cx="40" cy="19" r="25"></circle> 
    <text x="37" y="9.5" dy=".35em">my text</text> 
    </g> 
</svg> 

Gibt es eine Möglichkeit, es zu beheben? Ich bemerkte, dass ich für diese Elemente keine Intellisense hatte. Muss ich ein Paket dafür hinzufügen? So sieht es in meinem VS15 aus.

enter image description here

+0

Nur um zu überprüfen - das Problem ist nur zur Entwurfszeit? Alles funktioniert wie erwartet zur Laufzeit? – ChrisF

+0

Funktioniert der Editor besser, wenn Sie den erforderlichen XML-Namespace hinzufügen ('')?(Ich vermute, der Tippfehler in '' ist nur in Ihrer Frage). –

+0

@ FrédéricHamidi Ich folge [einem Blog] (http://tutorials.jenkov.com/svg/g-element.html), und dort verwenden sie das Schema. Ich habe es sowohl mit als auch ohne versucht. –

Antwort

2

Kein großer Fan von meinen eigenen Fragen zu beantworten, aber die Antwort war weniger als intensiv und ich habe schließlich etwas (im Wesentlichen basierend auf den Kommentaren, mit freundlicher Genehmigung von @HansPassant) kommen.

Kurzversion für den faulen effektiven Coder. Das Problem ist, dass das Tag SVG nicht als gültiges Element in einer Datei mit der Erweiterung HTML erkannt wird. Ich habe drei Wege gefunden, um damit umzugehen, von denen keiner aufrichtig ist, ehrlich gesagt.

  • Verwenden Sie die Erweiterung HTML wie üblich und machen Sie die meisten, wenn nicht alle Grafiken mit JavaScript. Da dies sehr häufig geschieht, ist dies der Ansatz, den ich verwenden werde, bis eine bessere Option vorgestellt wird. Dahinter steht, dass es keine Intellisense-Unterstützung für die SVG-spezifischen Tags im Markup gibt.

  • Verwenden Sie die Erweiterung XHTML. Dadurch wird das Problem behoben, die Seite wird jedoch nicht als Webseite gerendert. Der Browser erkennt es als XML und rendert es als solches.

  • Verwenden Sie eine externe Datei (z. B. Erweiterung SVG) und betten Sie sie in die tatsächliche Webseite ein. Der Nachteil dieses Ansatzes ist, dass wir eine weitere Datei (wir haben bereits CSS, LESS, JS, Partials wie CSHTML usw.) zu den Seiten Flora hinzufügen müssen. Außerdem könnte es sich als unpraktisch erweisen, die Grafiken aus JavaScript zu bearbeiten.

  • Mit this resource entdeckte ich eine Reihe von Schemas hinzugefügt werden. Das löst das Problem nicht und ist auch nicht unbedingt erforderlich (aber wahrscheinlich eine gute Sache).

    <?xml version="1.0" encoding="utf-8" standalone="no"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 
        <!-- <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> --> 
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> 
    

    Weiter unten in diesem Artikel gibt es eine Tabelle über die verschiedenen Möglichkeiten, SVG-Grafiken auf einer Webseite zu verwenden.

    Es gibt auch eine different approach basierend auf dem Hinzufügen von Schemadateien zu Visual Studio. Es scheint ein bisschen hacky und definitiv nicht etwas, das ich jedes Mal tun möchte, wenn ich eine neue Umgebung verwende. Abgesehen davon, die Farben der Screenshots deuten darauf hin, dass es ein bisschen alt ist, also bin ich vorsichtig (auch - ein bisschen faul).

    0

    Es klingt wie auf der Laufzeit funktioniert es gut?

    Visual Studio verliert oft (zumindest für mich) Intellisense und denkt, ich habe etwas falsch gemacht. Normalerweise repariert ein Clean & Rebuild die Squiggles und entfernt alle "Fehler", die keine tatsächlichen Fehler sind.

    +0

    Intellisense funktioniert gut, wie es scheint. Und nur um auf der sicheren Seite zu sein, habe ich alles neu aufgebaut und auch ein neues, leeres Projekt gestartet. Gleiches Verhalten erscheint und es ist streng auf SVG beschränkt. Ich habe allerdings ein paar neue Ideen zu testen und später werde ich einen Kumpel besuchen, der die Squiglies nicht hat. Wir werden sehen... –