[SVG] Relative Positionierung von <symbol> mit <use>

Fragen zu allen anderen Programmiersprachen.
Benutzeravatar
WPö
Moderator
Beiträge: 669
Registriert: 27.05.2008 12:44
Wohnort: Oberland
Kontaktdaten:

[SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von WPö »

Moin!

Mit SVGs wollte ich gerne schon einmal arbeiten. Also habe ich mir einen Widerstand gezeichnet und ein paar mal ausgegeben - klappt. Nun will ich aber gern das Zentrum des Widerstandes als Positionsreferenz haben und schrieb deshalb:

Code: Alles auswählen

<?xml version="1.0" encoding="ISO-8859-15"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:ev="http://www.w3.org/2001/xml-events"
 version="1.1" baseProfile="full"
 width="4000px" height="2000px" viewBox="0 0 4000 2000">

 <defs>
  <symbol id="Widerstand" style="font-family: Arial, sans serif; font-size: 50px; font-weight: bold;">
   <line x1="0" y1="125" x2="400" y2="125" stroke="red" stroke-width="11.81px" />
   <rect x="100" y="75" width="200" height="100" fill="white" stroke="black" stroke-width="11.81px" />
   <text x="50" y="50">R1</text>
   <text x="350" y="50" text-anchor="end">75</text>
  </symbol>
  <symbol id="W" style="font-family: Arial, sans serif; font-size: 50px; font-weight: bold;">
   <line x1="-200" y1="0" x2="200" y2="0" stroke="red" stroke-width="11.81px" />
   <rect x="-100" y="-50" width="200" height="100" fill="white" stroke="black" stroke-width="11.81px" />
   <text x="-150" y="-75">R1</text>
   <text x="150" y="-75" text-anchor="end">75</text>
  </symbol>
  <symbol id="R">
   <use xlink:href="#Widerstand" viewBox="-200 -125 400 375" transform="translate(-200,-125)" />
  </symbol>
 </defs>

 <line x1="0" y1="100" x2="4000" y2="100" stroke="black" stroke-width="1" />
 <line x1="0" y1="200" x2="4000" y2="200" stroke="black" stroke-width="1" />
 <line x1="0" y1="300" x2="4000" y2="300" stroke="black" stroke-width="1" />
 <line x1="0" y1="400" x2="4000" y2="400" stroke="black" stroke-width="1" />
 <line x1="0" y1="500" x2="4000" y2="500" stroke="black" stroke-width="1" />
 <line x1="0" y1="600" x2="4000" y2="600" stroke="black" stroke-width="1" />

 <line x1="100" y1="0" x2="100" y2="2000" stroke="black" stroke-width="1" />
 <line x1="200" y1="0" x2="200" y2="2000" stroke="black" stroke-width="1" />
 <line x1="300" y1="0" x2="300" y2="2000" stroke="black" stroke-width="1" />
 <line x1="400" y1="0" x2="400" y2="2000" stroke="black" stroke-width="1" />
 <line x1="500" y1="0" x2="500" y2="2000" stroke="black" stroke-width="1" />
 <line x1="600" y1="0" x2="600" y2="2000" stroke="black" stroke-width="1" />

 <use x="250" y="0" xlink:href="#Widerstand" />
 <use x="250" y="200" xlink:href="#R" />
 <use x="350" y="400" xlink:href="#W" />
 <use x="250" y="600" xlink:href="#R" />
 <use x="250" y="800" xlink:href="#R" />

</svg>
Leider wird mit #R und #W nur das rechte untere Viertel des Widerstandskörpers angezeigt. Ich habe schon mit viewBox() sowohl in <symbol> als auch in <use> herumgespielt, aber das bringt nichts. Wie geht's, den ganzen Widerstand mit Text anzuzeigen, ihn aber mit <use> an seinem Zentrum zu referenzieren?

Gruß - WPö
Ich glaube nur der Statistik, die ich selbst gefälscht habe!
Meine Netzpräsenz: WPö.de
PB5.31 auf LMDE und Pentium T7200 2,00GHz, 4GB DDR2, ATI X1400.
Benutzeravatar
Falko
Admin
Beiträge: 3535
Registriert: 29.08.2004 11:27
Computerausstattung: PC: MSI-Z590-GC; 32GB-DDR4, ICore9; 2TB M2 + 2x3TB-SATA2 HDD; Intel ICore9 @ 3600MHZ (Win11 Pro. 64-Bit),
Acer Aspire E15 (Win11 Home X64). Purebasic LTS 6.11b1
HP255G8 Notebook @AMD Ryzen 5 5500U with Radeon Graphics 2.10 GHz 3.4GHz, 32GB_RAM, 3TB_SSD (Win11 Pro 64-Bit)
Kontaktdaten:

Re: [SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von Falko »

Da man mit CorelDraw X3 sich schön deine Widerstände anschauen kann, habe ich
mir gedacht das mal so ins Blatt zu verschieben, das es nicht ausserhalb des Blatts angezeigt wird. Ebenso habe ich die 75 in den Widerstand verschoben. Vielleicht kannst du damit was anfangen. Ausser Corel Draw gibt es aber im Internet ein freewareprogramm, welches ebenfalls sehr schön diese Dateien anzeigen kann.

http://www.inkscape.org/

Code: Alles auswählen

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Creator: CorelDRAW -->
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="210mm" height="297mm" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 210 297"
 xmlns:xlink="http://www.w3.org/1999/xlink"
 xmlns:ev="http://www.w3.org/2001/xml-events"
 version="1.1"
 baseProfile="full">
 <defs>
  <style type="text/css">
   <![CDATA[
    .str2 {stroke:black;stroke-width:0.2646}
    .str1 {stroke:black;stroke-width:5.775}
    .str0 {stroke:red;stroke-width:5.775}
    .fil3 {fill:none}
    .fil0 {fill:none;fill-rule:nonzero}
    .fil1 {fill:white}
    .fil2 {fill:black;fill-rule:nonzero}
   ]]>
  </style>
 </defs>
<symbol id="W" viewBox="-946.656 -183.775 210 87.3811">
 <line class="fil0 str0" x1="-946.656" y1="-125.53" x2="-736.656" y2= "-125.53"  text-anchor="end"/>
 <rect class="fil1 str1" x="-894.156" y="-151.781" width="105" height="52.5001"/>
 <path class="fil2" d="M-918.485 -164.905l0 -18.7907 7.9888 0c2.0083,0 3.4651,0.1706 4.3751,0.5076 0.91,0.3367 1.6406,0.9362 2.1874,1.7981 0.5469,0.8661 0.8181,1.8505 0.8181,2.9619 0,1.4086 -0.4155,2.5768 -1.2423,3.4955 -0.827,0.9145 -2.0696,1.4963 -3.7189,1.7327 0.8225,0.4812 1.5007,1.0062 2.0345,1.5793 0.5338,0.5733 1.2513,1.5882 2.1569,3.0494l2.2968 3.6663 -4.5368 0 -2.7432 -4.0907c-0.9757,-1.4612 -1.6406,-2.3799 -1.9993,-2.7605 -0.3588,-0.3806 -0.7393,-0.6387 -1.1419,-0.7832 -0.4024,-0.1399 -1.0368,-0.2099 -1.9118,-0.2099l-0.7655 0 0 7.8444 -3.7977 0 -0.0002 -0.0002zm3.7976 -10.8457l2.8044 0c1.82,0 2.9575,-0.0742 3.4125,-0.2274 0.4506,-0.1532 0.805,-0.4201 1.0632,-0.7963 0.2536,-0.3762 0.3849,-0.8443 0.3849,-1.4088 0,-0.6344 -0.1706,-1.1417 -0.5076,-1.5313 -0.3369,-0.3893 -0.8137,-0.6344 -1.4307,-0.7393 -0.3062,-0.0393 -1.2292,-0.0613 -2.7692,-0.0613l-2.9575 0 0 4.7644z"/>
 <path id="_1" class="fil2" d="M-891.12 -164.905l-3.6006 0 0 -13.5757c-1.317,1.2338 -2.8657,2.1438 -4.6507,2.7299l0 -3.2681c0.9364,-0.3062 1.9601,-0.8882 3.0625,-1.7456 1.1025,-0.862 1.8594,-1.8638 2.2662,-3.0101l2.9226 0 0 18.8695 0 0.0001z"/>
 <path class="fil2" d="M-855.995 -133.461l0 -3.3425 12.3157 0 0 2.6119c-1.0149,1.0019 -2.0474,2.4369 -3.1018,4.3094 -1.0501,1.8682 -1.8507,3.8588 -2.4019,5.9631 -0.5512,2.1089 -0.8225,3.9901 -0.8137,5.6482l-3.4738 0c0.0613,-2.5988 0.5951,-5.2456 1.61,-7.945 1.0108,-2.7038 2.3627,-5.1144 4.0558,-7.2451l-8.1902 0 -0.0001 0z"/>
 <path id="_1_0" class="fil2" d="M-841.343 -123.105l3.5875 -0.3675c0.1006,0.8094 0.4068,1.4525 0.91,1.9251 0.5032,0.4768 1.085,0.7129 1.7412,0.7129 0.7526,0 1.3914,-0.3062 1.912,-0.9143 0.5205,-0.6125 0.783,-1.5356 0.783,-2.7649 0,-1.1507 -0.2582,-2.017 -0.7786,-2.5944 -0.5163,-0.5776 -1.1902,-0.8663 -2.017,-0.8663 -1.0324,0 -1.9601,0.4594 -2.7825,1.3737l-2.9224 -0.4242 1.8462 -9.7782 9.5244 0 0 3.3687 -6.7943 0 -0.5645 3.1939c0.805,-0.4026 1.6231,-0.6038 2.4633,-0.6038 1.5969,0 2.9532,0.582 4.06,1.7414 1.1112,1.1636 1.667,2.673 1.667,4.5281 0,1.5443 -0.4463,2.9268 -1.3431,4.1388 -1.2251,1.658 -2.9182,2.4851 -5.0882,2.4851 -1.7368,0 -3.15,-0.4639 -4.2437,-1.3957 -1.0937,-0.9318 -1.7501,-2.1831 -1.9601,-3.7582l-0.0002 -0.0002z"/>
</symbol>
<symbol id="Widerstand" viewBox="-841.657 -118.149 210.002 87.382">
 <line class="fil3 str0" x1="-841.657" y1="-59.9051" x2="-631.655" y2= "-59.9051" />
 <rect class="fil1 str1" x="-789.155" y="-86.155" width="105" height="52.5001"/>
 <path class="fil2" d="M-813.486 -99.2799l0 -18.7907 7.9888 0c2.0083,0 3.4651,0.1706 4.3751,0.5076 0.91,0.3367 1.6406,0.9362 2.1874,1.7981 0.5469,0.8661 0.8181,1.8505 0.8181,2.9619 0,1.4086 -0.4155,2.5768 -1.2423,3.4955 -0.827,0.9145 -2.0696,1.4963 -3.7189,1.7327 0.8225,0.4812 1.5007,1.0062 2.0345,1.5793 0.5338,0.5733 1.2513,1.5882 2.1569,3.0494l2.2968 3.6663 -4.5368 0 -2.7432 -4.0907c-0.9757,-1.4612 -1.6406,-2.3799 -1.9993,-2.7605 -0.3588,-0.3806 -0.7393,-0.6387 -1.1419,-0.7832 -0.4024,-0.1399 -1.0368,-0.2099 -1.9118,-0.2099l-0.7655 0 0 7.8444 -3.7977 0 -0.0002 -0.0002zm3.7976 -10.8457l2.8044 0c1.82,0 2.9575,-0.0742 3.4125,-0.2274 0.4506,-0.1532 0.805,-0.4201 1.0632,-0.7963 0.2536,-0.3762 0.3849,-0.8443 0.3849,-1.4088 0,-0.6344 -0.1706,-1.1417 -0.5076,-1.5313 -0.3369,-0.3893 -0.8137,-0.6344 -1.4307,-0.7393 -0.3062,-0.0393 -1.2292,-0.0613 -2.7692,-0.0613l-2.9575 0 0 4.7644z"/>
 <path id="_1_1" class="fil2" d="M-786.12 -99.2799l-3.6006 0 0 -13.5757c-1.317,1.2338 -2.8657,2.1438 -4.6507,2.7299l0 -3.2681c0.9364,-0.3062 1.9601,-0.8882 3.0625,-1.7456 1.1025,-0.862 1.8594,-1.8638 2.2662,-3.0101l2.9226 0 0 18.8695 0 0.0001z"/>
 <path class="fil2" d="M-752.893 -66.4116l0 -3.3425 12.3157 0 0 2.6119c-1.0149,1.0019 -2.0474,2.4369 -3.1018,4.3094 -1.0501,1.8682 -1.8507,3.8588 -2.4019,5.9631 -0.5512,2.1089 -0.8225,3.9901 -0.8137,5.6482l-3.4738 0c0.0613,-2.5988 0.5951,-5.2456 1.61,-7.945 1.0108,-2.7038 2.3627,-5.1144 4.0558,-7.2451l-8.1902 0 -0.0001 0z"/>
 <path id="_1_2" class="fil2" d="M-738.241 -56.056l3.5875 -0.3675c0.1006,0.8094 0.4068,1.4525 0.91,1.9251 0.5032,0.4768 1.085,0.7129 1.7412,0.7129 0.7526,0 1.3914,-0.3062 1.912,-0.9143 0.5205,-0.6125 0.783,-1.5356 0.783,-2.7649 0,-1.1507 -0.2582,-2.017 -0.7786,-2.5944 -0.5163,-0.5776 -1.1902,-0.8663 -2.017,-0.8663 -1.0324,0 -1.9601,0.4594 -2.7825,1.3737l-2.9224 -0.4242 1.8462 -9.7782 9.5244 0 0 3.3687 -6.7943 0 -0.5645 3.1939c0.805,-0.4026 1.6231,-0.6038 2.4633,-0.6038 1.5969,0 2.9532,0.582 4.06,1.7414 1.1112,1.1636 1.667,2.673 1.667,4.5281 0,1.5443 -0.4463,2.9268 -1.3431,4.1388 -1.2251,1.658 -2.9182,2.4851 -5.0882,2.4851 -1.7368,0 -3.15,-0.4639 -4.2437,-1.3957 -1.0937,-0.9318 -1.7501,-2.1831 -1.9601,-3.7582l-0.0002 -0.0002z"/>
</symbol>
<symbol id="R" viewBox="-946.656 -183.775 210.002 87.382">
 <use x="-946.656" y="-183.775" width="210.002" height="87.382" xlink:href="#Widerstand"/>
</symbol>
 <g id="Ebene_x0020_1">
  <metadata id="CorelCorpID_0Corel-Layer"/>
  <line class="fil0 str2" x1="6.2208" y1="27.418" x2="198.555" y2= "27.418" />
  <line class="fil0 str2" x1="6.2208" y1="32.2264" x2="198.555" y2= "32.2264" />
  <line class="fil0 str2" x1="6.2208" y1="37.0347" x2="198.555" y2= "37.0347" />
  <line class="fil0 str2" x1="6.2208" y1="41.8431" x2="198.555" y2= "41.8431" />
  <line class="fil0 str2" x1="6.2208" y1="46.6514" x2="198.555" y2= "46.6514" />
  <line class="fil0 str2" x1="6.2208" y1="51.4598" x2="198.555" y2= "51.4598" />
  <line class="fil0 str2" x1="11.0293" y1="22.6097" x2="11.0293" y2= "118.777" />
  <line class="fil0 str2" x1="15.8376" y1="22.6097" x2="15.8376" y2= "118.777" />
  <line class="fil0 str2" x1="20.6459" y1="22.6097" x2="20.6459" y2= "118.777" />
  <line class="fil0 str2" x1="25.4544" y1="22.6097" x2="25.4544" y2= "118.777" />
  <line class="fil0 str2" x1="30.2627" y1="22.6097" x2="30.2627" y2= "118.777" />
  <line class="fil0 str2" x1="35.071" y1="22.6097" x2="35.071" y2= "118.777" />
  <use transform="scale(0.0915875 0.0915875)" x="199.173" y="268.564" width="210.002" height="87.382" xlink:href="#Widerstand"/>
  <use transform="scale(0.0915875 0.0915875)" x="94.1718" y="307.94" width="210.002" height="87.382" xlink:href="#R"/>
  <use transform="scale(0.0915875 0.0915875)" x="146.673" y="412.941" width="210" height="87.3811" xlink:href="#W"/>
  <use transform="scale(0.0915875 0.0915875)" x="94.1718" y="517.94" width="210.002" height="87.382" xlink:href="#R"/>
  <use transform="scale(0.0915875 0.0915875)" x="94.1718" y="622.941" width="210.002" height="87.382" xlink:href="#R"/>
 </g>
</svg>
Bild
Win11 Pro 64-Bit, PB_6.11b1
Benutzeravatar
WPö
Moderator
Beiträge: 669
Registriert: 27.05.2008 12:44
Wohnort: Oberland
Kontaktdaten:

Re: [SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von WPö »

So, jetzt komme ich endlich dazu, mich wieder mit SVGs zu beschäftigen.

Danke, Falko, für die angefallene Arbeit. Leider war die größtenteils für die Tonne, denn Dein Quelltext hat zwar ein anderes Bezugssystem inkl. Skalierung der Bemaßung - das wirkt sich aber nicht auf die Art der Positionierung aus. Darum geht es mir. Übrigens schrottet Dein CorelDraw die Schrift und macht daraus ein riesiges <path>. Allein das mit den Klassen (äquivalent zum CSS in XHTML) werde ich gerne übernehmen.

Noch eine Idee, wie man den Widerstand an dessen Körpermittelpunkt greifen kann, ohne Teile der Zeichnung unsichtbar zu haben?

Gruß - WPö
Ich glaube nur der Statistik, die ich selbst gefälscht habe!
Meine Netzpräsenz: WPö.de
PB5.31 auf LMDE und Pentium T7200 2,00GHz, 4GB DDR2, ATI X1400.
Benutzeravatar
TomS
Beiträge: 1508
Registriert: 23.12.2005 12:41
Wohnort: München

Re: [SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von TomS »

http://www.selfsvg.info/?section=6.5

<use> ist anscheinend das gleiche wie DisplaySprite().
Da wird nicht die 0-Position gesetzt, sondern einfach die Anzeigeposition.
Du kannst mit Use also das gleiche Symbol oder Element öfter an verschiedenen Positionen anzeigen.

Code: Alles auswählen

<use x="60" y="130" xlink:href="#Widerstand" transform="translate(-60,-130)" />
-60 und -130 sollte durch -M\x und -M\y ersetzt werden^^
Wenn man transform in <Symbol> einsetzt, wird es ignoriert und wenn man es in Line etc einsetzt, wird abgeschnitten... :?
Benutzeravatar
WPö
Moderator
Beiträge: 669
Registriert: 27.05.2008 12:44
Wohnort: Oberland
Kontaktdaten:

Re: [SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von WPö »

Genau das ist der Punkt. Das transform-Dingenskirchen will ich nicht im <use> haben - das hat da meiner Ansicht nach überhaupt nichts zu suchen. Verschiebe ich es in ein separates <symbol>, wird das Bild abgeschnitten, was auch nicht gerade Sinn der Sache ist.

Ich geh' noch am Stock...

Gruß - WPö
Ich glaube nur der Statistik, die ich selbst gefälscht habe!
Meine Netzpräsenz: WPö.de
PB5.31 auf LMDE und Pentium T7200 2,00GHz, 4GB DDR2, ATI X1400.
Benutzeravatar
TomS
Beiträge: 1508
Registriert: 23.12.2005 12:41
Wohnort: München

Re: [SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von TomS »

Code: Alles auswählen

<?xml version="1.0"  encoding="ISO-8859-15"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.1" baseProfile="full"
width="4000px" height="2000px" viewBox="0 0 4000 2000">

<defs>
<!-- Hier den negativen Mittelpunkt angeben ^^ -->
  <symbol x="-200" y="-100" id="Widerstand" style="font-family: Arial, sans serif; font-size: 50px; font-weight: bold;">
   <line x1="0" y1="125" x2="400" y2="125" stroke="red" stroke-width="11.81px" />
   <rect x="100" y="75" width="200" height="100" fill="white" stroke="black" stroke-width="11.81px" />
   <text x="50" y="50">R1</text>
   <text x="350" y="50" text-anchor="end">75</text>

   	<!-- Ein Rechteck um das ganze Symbol -->
   		<rect x="0" y="0" width="400" height="200" stroke="black" fill="none" stroke-width="1px" />
	<!-- Mitte vom Rechteck/Symbol markieren -->
		<rect x="196" y="96" width="8" height="8" stroke="black" fill="black" stroke-width="1px"/>

  </symbol>
  <symbol id="W" style="font-family: Arial, sans serif; font-size: 50px; font-weight: bold;">
   <line x1="-200" y1="0" x2="200" y2="0" stroke="red" stroke-width="11.81px" />
   <rect x="-100" y="-50" width="200" height="100" fill="white" stroke="black" stroke-width="11.81px" />
   <text x="-150" y="-75">R1</text>
   <text x="150" y="-75" text-anchor="end">75</text>
  </symbol>
  <symbol id="R">
   <use xlink:href="#Widerstand" viewBox="-200 -125 400 375" transform="translate(-200,-125)" />
  </symbol>
</defs>

<line x1="0" y1="100" x2="4000" y2="100" stroke="black" stroke-width="1" />
<line x1="0" y1="200" x2="4000" y2="200" stroke="black" stroke-width="1" />
<line x1="0" y1="300" x2="4000" y2="300" stroke="black" stroke-width="1" />
<line x1="0" y1="400" x2="4000" y2="400" stroke="black" stroke-width="1" />
<line x1="0" y1="500" x2="4000" y2="500" stroke="black" stroke-width="1" />
<line x1="0" y1="600" x2="4000" y2="600" stroke="black" stroke-width="1" />

<line x1="100" y1="0" x2="100" y2="2000" stroke="black" stroke-width="1" />
<line x1="200" y1="0" x2="200" y2="2000" stroke="black" stroke-width="1" />
<line x1="300" y1="0" x2="300" y2="2000" stroke="black" stroke-width="1" />
<line x1="400" y1="0" x2="400" y2="2000" stroke="black" stroke-width="1" />
<line x1="500" y1="0" x2="500" y2="2000" stroke="black" stroke-width="1" />
<line x1="600" y1="0" x2="600" y2="2000" stroke="black" stroke-width="1" />

<use x="200" y="100" xlink:href="#Widerstand" />
<use x="500" y="400" xlink:href="#Widerstand" />

</svg> 
Achte auf meine Kommentare.
Der Mittelpunkt, den ich eingefügt habe befindet sich jetzt genau an den Positionen die in <USE> angegeben sind.

Edit: Das kannst du jetzt weglassen (wenn es überhaupt jemals einen Sinn hatte)

Code: Alles auswählen

  <symbol id="R">
   <use xlink:href="#Widerstand" viewBox="-200 -125 400 375" transform="translate(-200,-125)" />
  </symbol>
Benutzeravatar
WPö
Moderator
Beiträge: 669
Registriert: 27.05.2008 12:44
Wohnort: Oberland
Kontaktdaten:

Re: [SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von WPö »

Danke, Thomas!

Nachdem ich Deine Version erfolglos mit Opera betrachtete und erstmal wieder etwas aufräumte, probierte ich das SVG nochmal mit Firefox. Siehe da: Es klappert! Exakt dieselbe Datei wird von Opera und Firefox unterschiedlich dargestellt. Es ist zum Ko**en!

Jetzt noch die aufgeräumte Version:

Code: Alles auswählen

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="2000" height="1000" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 2000 1000"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:ev="http://www.w3.org/2001/xml-events"
version="1.1"
baseProfile="full">

<defs>
  <style type="text/css">
   <![CDATA[
    .str2 {stroke: black; stroke-width: 0.5;}
    .str1 {stroke: black; stroke-width: 11.81;}
    .str0 {stroke: red; stroke-width: 11.81;}
    .fil3 {fill: none}
    .fil0 {fill: none; fill-rule: nonzero;}
    .fil1 {fill: white;}
    .fil2 {fill: black; fill-rule: nonzero;}
   ]]>
  </style>
  <!-- Hier den negativen Mittelpunkt angeben ^^ -->
  <symbol x="-200" y="-100" id="Widerstand" style="font-family: Arial, sans serif; font-size: 50px; font-weight: bold;">
   <line x1="0" y1="125" x2="400" y2="125" class="str0" />
   <rect x="100" y="75" width="200" height="100" class="str1 fil1" />
   <text x="50" y="50">R1</text>
   <text x="350" y="50" text-anchor="end">75</text>
   <!-- Ein Rechteck um das ganze Symbol -->
   <rect x="0" y="0" width="400" height="200" class="str2 fil3" />
   <!-- Mitte vom Rechteck/Symbol markieren -->
   <rect x="196" y="121" width="8" height="8" class="str2 fil2" />
  </symbol>
</defs>

<g>
  <line class="fil0 str2" x1="0" y1="000" x2="1400" y2="000" />
  <line class="fil0 str2" x1="0" y1="100" x2="1400" y2="100" />
  <line class="fil0 str2" x1="0" y1="200" x2="1400" y2="200" />
  <line class="fil0 str2" x1="0" y1="300" x2="1400" y2="300" />
  <line class="fil0 str2" x1="0" y1="400" x2="1400" y2="400" />
  <line class="fil0 str2" x1="0" y1="500" x2="1400" y2="500" />
  <line class="fil0 str2" x1="000" y1="00" x2="000" y2="600" />
  <line class="fil0 str2" x1="100" y1="00" x2="100" y2="600" />
  <line class="fil0 str2" x1="200" y1="00" x2="200" y2="600" />
  <line class="fil0 str2" x1="300" y1="00" x2="300" y2="600" />
  <line class="fil0 str2" x1="400" y1="00" x2="400" y2="600" />
  <line class="fil0 str2" x1="500" y1="00" x2="500" y2="600" />
  <line class="fil0 str2" x1="600" y1="00" x2="600" y2="600" />
  <line class="fil0 str2" x1="700" y1="00" x2="700" y2="600" />
  <line class="fil0 str2" x1="800" y1="00" x2="800" y2="600" />
  <line class="fil0 str2" x1="900" y1="00" x2="900" y2="600" />
  <line class="fil0 str2" x1="1000" y1="00" x2="1000" y2="600" />
  <line class="fil0 str2" x1="1100" y1="00" x2="1100" y2="600" />
  <use x="200" y="100" xlink:href="#Widerstand" />
  <use x="500" y="400" xlink:href="#Widerstand" />
</g>
</svg>
Fazit: Werde mal nach Fehlern bei Opera.com und Opera-Info.de suchen. Wenn das nicht abzustellen geht, muß ich auf SVGs vorerst verzichten, weil die zu erstellenden Grafiken ja in jedem Navigator gleich angezeigt werden sollen.

Gruß - WPö
Ich glaube nur der Statistik, die ich selbst gefälscht habe!
Meine Netzpräsenz: WPö.de
PB5.31 auf LMDE und Pentium T7200 2,00GHz, 4GB DDR2, ATI X1400.
Benutzeravatar
TomS
Beiträge: 1508
Registriert: 23.12.2005 12:41
Wohnort: München

Re: [SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von TomS »

Jaja. Opera war schon immer ein wenig hinterher. Früher war die CSS-Unterstützung z.B. saumies.
Zum Glück kam kurze Zeit, nachdem ich das Internet für mich entdeckt habe der Firefox 1.0 raus :D

Fehler bzw. fehlende Unterstützung ist bekannt: http://www.opera.com/docs/specs/opera9/svg/
Scroll mal runter zu Attribut: X. Symbol ist nicht aufgeführt.
http://hoffmann.bplaced.net/opera/ hat geschrieben:For users and authors:
Do not blame anybody, if you have not even read the specifications.

And you have to read the specification carefully and you have to distinguish
between different profiles and versions.
Note, that SVG tiny or SVG basic cover just a large part of SVG, but not everything,
so it is not an error, if features of SVG are not supported, that are not included in SVG tiny
or SVG basic.
You have to read SVG mobile specification to optimize your files. Normally, SVG mobile just
refers to the SVG specification. You have to look carefully at the restrictions.
Muss man sich mal erkundigen ob das X-Attribut in Symbol Teil on SVG-Basic ist. Wenn nicht, kannste Opera-Support knicken.

Die Frage ist halt, wofür du das brauchst. Wenn du nur SVG-Dateien mit PB erstellen willst, bzw einen Schaltkreis-Editor mit SVG-Ausgabe, dann rechne halt einfach die Mittelpunktskoordinaten auf Links-Oben-Koordinaten um.
Benutzeravatar
WPö
Moderator
Beiträge: 669
Registriert: 27.05.2008 12:44
Wohnort: Oberland
Kontaktdaten:

Re: [SVG] Relative Positionierung von <symbol> mit <use>

Beitrag von WPö »

Tja, hab jetzt einiges nachgelesen. Es ist eine Schande, daß Opera SVG noch nichtmal als tiny oder basic kpl. unterstützt. Da sollte Opera ASA mal nachlegen. Übrigens hast Du die Daten der alten 9er-Versionen vor Dir liegen. Ich arbeite mit Opera 10.5x. Früher hat man gern auf Opera rungehackt wegen CSS z.B., wie Du schriebst. Mit dem IE hatte ich derzeit wesentlich größere Probleme, weswegen er für mich bis heute als Navigator - geschweige denn Referenz - ausschied.

Letztlich werde ich auf SVGs verzichten, um in meinem Elektronikkurs die Widerstandsnetzwerke in geringerer Dateigröße anzubieten. PNG ist klein genug. Nur dafür bräuchte ich die SVG-Unterstützung.

Gruß - WPö
Ich glaube nur der Statistik, die ich selbst gefälscht habe!
Meine Netzpräsenz: WPö.de
PB5.31 auf LMDE und Pentium T7200 2,00GHz, 4GB DDR2, ATI X1400.
Antworten