[svg] use element, positioneren viewbox van een symbol

[Verwijderd]

Ik heb een symbol gedefinieerd, met een viewBox="0 0 10 10" attribuut en preserveAspectRatio="none"

Dit symbol wil ik gaan gebruiken ergens anders op de pagina, wat ik doe met het use element. Nu kan ik met de x en y attributen van dat use element het symbol positioneren, maar mijn probleem is dat dat gedaan wordt tov de linkerbovenhoek (coordinaat transformaties daargelaten) van de viewbox van de symbol. Ik wil dat graag tov het midden van de viewbox (er staat een circel in en nog wat zut) Eerste ingeving was de min-x en min-y van de viewbox aan te passen naar -5, maar dat had geen effect

Ik kan wel een extra transform="translate(...)" in het use element stoppen, maar dat heeft dan effect in het nieuwe coordinatenstelsel, dus voor elk use element zou ik naast de width en height nog een translate moeten doen van "min-half-de-width-of-height" Ik wil eigenlijk gewoon direct het midden kunnen neerzetten.

Een translate in het symbol element kan ook, maar dan wordt de boel afgekapt bij de viewportboundaries, dus da's ook niet wat ik wil

ter illustratie:

XML:

<defs>
  <symbol id="foo" viewBox="0 0 10 10" preserveAspectRatio="none">
    <!-- stuff -->
  </symbol>
</defs>

<use xlink:href="#foo" width="20" height="5"/>

edit: na het schrijven (en posten) van de laatste alinea bedacht ik me ineens "goh, er is natuurlijk ook het overflow property" - ergo: opgelost

voorbeeld:

XML:

<defs>
  <symbol id="foo" viewBox="0 0 10 10" preserveAspectRatio="none" overflow="visible">
    <ellipse cx="0" cy="0" rx="5" ry="5" />
  </symbol>
</defs>

<use xlink:href="#foo" width="20" height="5"/>

[ Voor 13% gewijzigd door Verwijderd op 06-09-2007 09:15 ]