Announcement

Collapse
No announcement yet.

SVG Rasterlinien mit xslt2.0 generieren

Collapse
X
Collapse
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    SVG Rasterlinien mit xslt2.0 generieren

    Hallo zusammen

    Um in SVG, ein Gitternetz/Raster über ein importiertes Bild zu legen (img src="xxx.png"/img), suche ich nach Lösungsansätzen.

    Bisher generiere ich dies im Notepad mit dem Blockeditor usw. nach Bedarf.

    Für eine xslt2.0 Transformation habe ich folgendes XML source-dokument bsp: grid_vorlage.xml.

    Hier eine Raster Vorlage!


    Code:
    <?XML Version="1.0" Encoding="utf-8"?>
<grid raster="5" item="100">
<r>5</r>
<r>10</r>
<r>15</r>
<r>20</r>
<r>25</r>
<!-- usw. im vorliegenden Fall 100mal -->
</grid>
    Das xslt2.0 Stylesheet sollte diesen Job (raster und items) übernehmen und das svg-dokument in einem Zuge realisieren.
    Je nach Bedarf könnte ich den Raster und die benötigte Menge/item am Quelltext einstellen.

    - generiere 100mal mit raster 5, horizontal
    - generiere 100mal mit raster 5, vertikal

    Hier ein SVG-Beispiel

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1500" height="1600" viewBox="-100 -100 1400 1500">
<!-- Mustervorgabe ohne Menge/item -->
<g class="grid_h5">
	<line x1="0" y1="0" x2="460" y2="0" stroke="red" stroke-width="0.10mm"/>
	<line x1="0" y1="5" x2="460" y2="5" stroke="red" stroke-width="0.10mm"/>
	<line x1="0" y1="10" x2="460" y2="10" stroke="red" stroke-width="0.10mm"/>
	<line x1="0" y1="15" x2="460" y2="15" stroke="red" stroke-width="0.10mm"/>
	<line x1="0" y1="20" x2="460" y2="20" stroke="red" stroke-width="0.10mm"/>
</g>
<g class="grid_v5">
	<line x1="0" y1="0" x2="0" y2="460" stroke="blue" stroke-width="0.10mm"/>
	<line x1="5" y1="0" x2="5" y2="460" stroke="blue" stroke-width="0.10mm"/>
	<line x1="10" y1="0" x2="10" y2="460" stroke="blue" stroke-width="0.10mm"/>
	<line x1="15" y1="0" x2="15" y2="460" stroke="blue" stroke-width="0.10mm"/>
	<line x1="20" y1="0" x2="20" y2="460" stroke="blue" stroke-width="0.10mm"/>
</g>
<g class="xy">
<rect x="-3" y="-3" width="466" height="466" fill="none" stroke="green" stroke-width="0.10mm"/>
</g>
</svg>
    Wo muss ich suchen:

    - bei xslt-Funktionen / Variablen / Regex

    Ein Tip wo ich suchen muss genügt mir, bin ein bisschen aus der Übung mit xslt.

    Viele Grüsse

    Karl_Heg
    Tags: None
  • #2
    Mit XSLT 2.0 kann man das einfach über for-each="0 to 100" realisieren, da braucht man noch nicht einmal das XML-Gerüst, das du gezeigt hast:

    Code:
    <?xml version="1.0" encoding="UTF-8" ?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xs="http://www.w3.org/2001/XMLSchema"
  exclude-result-prefixes="xs">

<xsl:param name="raster" as="xs:decimal" select="5"/>
<xsl:param name="item" as="xs:integer" select="100"/>
<xsl:param name="length" as="xs:integer" select="460"/>

<xsl:output indent="yes"/>

<xsl:template name="create-raster">
    <xsl:param name="raster" as="xs:decimal" select="$raster"/>
    <xsl:param name="item" as="xs:integer" select="$item"/>
    <xsl:param name="length" as="xs:integer" select="$length"/>
    <g class="grid_h5">
        <xsl:for-each select="0 to $item">
            <line x1="0" y1="{. * $raster}" x2="{$length}" y2="{. * $raster}" stroke="red" stroke-width="0.10mm"/>
        </xsl:for-each>        
    </g>
    <g class="grid_v5">
        <xsl:for-each select="0 to $item">
            <line x1="{. * $raster}" y1="0" x2="{. * $raster}" y2="{$length}" stroke="red" stroke-width="0.10mm"/>
        </xsl:for-each>        
    </g>
</xsl:template>

<xsl:template match="/" name="main">
    <svg>
        <xsl:call-template name="create-raster"></xsl:call-template>
    </svg>
</xsl:template>
</xsl:transform>
    Online-Beispiel unter http://xsltransform.net/pPzifpE.

    Comment

    • #3
      Regeln/Syntax, innerhalb der geschweiften Klammern

      Guten Tag Martin

      Du hast einen richtigen Volltreffer gelandet.

      Recht herzlichen Dank.

      Sind die Regeln/Syntax, innerhalb der geschweiften Klammern bei X-Path reglementiert (muss ich neu aufarbeiten)?
      bsp: xsl:value-of select="0 to 15"
      Sensationell, wie diese Formulierungen im xsl:for-eatch|xsl:value-of/select Attribut funktionieren.

      Gruss

      Karl_Heg

      Comment

      • #4
        Die geschweiften Klammern in Attributwerten von Elementen, wie in
        Code:
        <line x1="0" y1="{. * $raster}" x2="{$length}" y2="{. * $raster}" stroke="red" stroke-width="0.10mm"/>
        sind Teil von XSLT, das sind "attribute value templates" (http://www.w3.org/TR/xslt20/#dt-attr...value-template), dabei wird innerhalb eines Paares von geschweiften Klammern ein beliebiger XPath-Ausdruck verwendet, um den Attributwert (oder einen Teil davon) zu berechnen, das ist eine kompakte Schreibweise, die wesentlich kürzer ist, als
        Code:
        <xsl:attribute name="y1" select=". * $raster"/>
        für jedes Attribut schreiben zu müssen.

        Comment

        • #5
          Hallo Martin

          Haut alles hin und ist ausbaufähig in alle Richtungen!
          Trotzdem gibt's da noch einen Hacken.
          Per XSLT werden vorwiegend Abfragen|Aufzählungen|usw. aus vorliegenden Daten-Beständen vorgenommen.

          Zur Generierung von Sequenzen mit gemischten Datentypen (a-z|A-Z|i-vi..etc.|I-VI..etc.|1.), gibt es bekanntlich:

          Code:
          <xsl:number format="a"/>
<xsl:number format="A"/>
<xsl:number format="1."/>
<xsl:number format="i"/>
<xsl:number format="I"/>
          Dies ist bsp: in folgendem Link dargestellt.

          http://www.pagina-online.de/xml-hint...ung/?L=o%27%22

          Nun geht es mir um die Generierung von Sequenzen, ohne Bestände! (aus dem Stand, ohne Datenbestände)
          Bsp:

          - generiere ein Register|Index|usw. Alphabet A-K|a-u| usw.
          - generiere ein Register|Index|usw. numerisch 1-200 .... (dies funktioniert bereits einwandfrei, gemäss Instr. von Martin Honnen "BRAVO")
          - generiere ein Register|Index|usw. römisch (i-xx..), (I-XX..)
          usw.

          Wie beschreibt die Fachwelt (xslt/xpath) (evtl. xquery) diese Situation?

          - generating sequences
          - without nodes
          - without data
          usw.

          Tips und Links genügen.

          Danke im Voraus

          Karl_Heg

          Comment

          • #6
            Du kann ja bei
            Code:
            <xsl:number value="." format="I"/>
            den Wert angeben, der formatiert werden soll, und wie man Sequenzen von Zahlen per
            Code:
            to
            generiert, wurde schon gezeigt:

            Code:
            <?xml version="1.0" encoding="UTF-8" ?>
<xsl:transform xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="2.0">

<xsl:output indent="yes"/>

<xsl:template match="/" name="main">
    <xsl:for-each select="1 to 26">
      <item>
        <xsl:number format="A" value="."/>
      </item>
    </xsl:for-each>
    <xsl:for-each select="1 to 100">
      <item>
        <xsl:number format="I" value="."/>
      </item>
    </xsl:for-each>
</xsl:template>
</xsl:transform>
            Ergebnis ist dann
            Code:
            <?xml version="1.0" encoding="UTF-8"?>
<item>A</item>
<item>B</item>
<item>C</item>
<item>D</item>
<item>E</item>
<item>F</item>
<item>G</item>
<item>H</item>
<item>I</item>
<item>J</item>
<item>K</item>
<item>L</item>
<item>M</item>
<item>N</item>
<item>O</item>
<item>P</item>
<item>Q</item>
<item>R</item>
<item>S</item>
<item>T</item>
<item>U</item>
<item>V</item>
<item>W</item>
<item>X</item>
<item>Y</item>
<item>Z</item>
<item>I</item>
<item>II</item>
<item>III</item>
<item>IV</item>
<item>V</item>
<item>VI</item>
<item>VII</item>
<item>VIII</item>
<item>IX</item>
<item>X</item>
<item>XI</item>
<item>XII</item>
<item>XIII</item>
<item>XIV</item>
<item>XV</item>
<item>XVI</item>
<item>XVII</item>
<item>XVIII</item>
<item>XIX</item>
<item>XX</item>
<item>XXI</item>
<item>XXII</item>
<item>XXIII</item>
<item>XXIV</item>
<item>XXV</item>
<item>XXVI</item>
<item>XXVII</item>
<item>XXVIII</item>
<item>XXIX</item>
<item>XXX</item>
<item>XXXI</item>
<item>XXXII</item>
<item>XXXIII</item>
<item>XXXIV</item>
<item>XXXV</item>
<item>XXXVI</item>
<item>XXXVII</item>
<item>XXXVIII</item>
<item>XXXIX</item>
<item>XL</item>
<item>XLI</item>
<item>XLII</item>
<item>XLIII</item>
<item>XLIV</item>
<item>XLV</item>
<item>XLVI</item>
<item>XLVII</item>
<item>XLVIII</item>
<item>XLIX</item>
<item>L</item>
<item>LI</item>
<item>LII</item>
<item>LIII</item>
<item>LIV</item>
<item>LV</item>
<item>LVI</item>
<item>LVII</item>
<item>LVIII</item>
<item>LIX</item>
<item>LX</item>
<item>LXI</item>
<item>LXII</item>
<item>LXIII</item>
<item>LXIV</item>
<item>LXV</item>
<item>LXVI</item>
<item>LXVII</item>
<item>LXVIII</item>
<item>LXIX</item>
<item>LXX</item>
<item>LXXI</item>
<item>LXXII</item>
<item>LXXIII</item>
<item>LXXIV</item>
<item>LXXV</item>
<item>LXXVI</item>
<item>LXXVII</item>
<item>LXXVIII</item>
<item>LXXIX</item>
<item>LXXX</item>
<item>LXXXI</item>
<item>LXXXII</item>
<item>LXXXIII</item>
<item>LXXXIV</item>
<item>LXXXV</item>
<item>LXXXVI</item>
<item>LXXXVII</item>
<item>LXXXVIII</item>
<item>LXXXIX</item>
<item>XC</item>
<item>XCI</item>
<item>XCII</item>
<item>XCIII</item>
<item>XCIV</item>
<item>XCV</item>
<item>XCVI</item>
<item>XCVII</item>
<item>XCVIII</item>
<item>XCIX</item>
<item>C</item>
            Und XSLT 2.0 kann man ja auch ohne XML-Eingabe-Dokument ausführen, indem man ein Template mit Namen als initiales Template benennnt, mit Saxon 9 und der Kommandozeile mittels
            Code:
            -it:template-name
            , mit anderen XSLT 2.0 Prozessoren ähnlich.

            Comment

            • #7
              Das Raster lässt sich mittels geeigneter Wahl von stroke-dasharray auch codesparender bauen, hier ein Beispiel ohne weitere Parameter zum Koordinatensystem:
              [Highlight=xml]
              <?xml version="1.0" encoding="UTF-8"?>
              <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

              <g>
              <rect x="5" y="5" width="500" height="500" fill="none" stroke="green" stroke-width="0.5"/>
              <line x1="5" y1="255" x2="510" y2="255" stroke="red" stroke-dasharray="0.5,9.5" stroke-width="500"/>
              <line x1="255" y1="5" x2="255" y2="510" stroke="blue" stroke-dasharray="0.5,9.5" stroke-width="500"/>
              </g>

              </svg>
              [/Highlight]
              Die Rasterwerte könnte man nach Bedarf auch via Transformation erzeugen.

              Comment

              • #8
                Hallo Thomas

                Du sagst es: .............. geeigneter Wahl von stroke-dasharray auch codesparender bauen,!

                Das ist auch bei mir oberstes Gebot.

                Nun Sind wir mit den gewonnen Kenntnissen gerüstet um Bezugspunkte/Profile/Umrisse usw. zu erzeugen und später zu referenzieren.
                Beim Aufbau von Diagrammen/Anschauungsmaterial (Kartografie/Anatomie usw.), insbesondere um das textbasierte programmieren mit Scriptsprachen zu lernen,
                ist dies ein wertvoller Anfang.

                Grossen Dank nochmals an Martin und Thomas

                Gruss

                Karl_Heg

                Comment

                Previous template Next
                Working...
                X