Dlaczego zagnieżdżać element <svg> wewnątrz innego elementu <svg>?

Dlaczego takie demo: http://jsbin.com/ejorus/2/edit, ma element <svg> zagnieżdżony wewnątrz innego elementu <svg>?Dlaczego zagnieżdżać element <svg> wewnątrz innego elementu <svg>?

<svg class="graph"> 
    <svg viewBox="0 0 1000 1000" preserveAspectRatio="none"> 
     <g transform="translate(30,0)"> 
      <!-- ... --> 
     </g> 
    </svg> 
</svg>

JS Bin jest zmodyfikowaną wersją the demo w tym blogu: http://meloncholy.com/blog/making-responsive-svg-graphs/

Źródło

2013-06-03 Web_Designer

Masz rację (jak mówisz w Mr. Alien's answer), że oba elementy SVG mają te same pozycje względne, a nawet wyświetla wykres dobrze bez zewnętrzny SVG.

Powodem, dla którego go dodałem, jest to, że JavaScript (którego potrzebowałem, aby zatrzymać zgniatanie etykiet) korzysta z elementu SVG, elementu transform matrix (spowodowanego przez zastosowany atrybut viewBox), aby usunąć skalowanie tekstu.

Niestety, zwrócona macierz nie uwzględnia transformacji zastosowanych do samego elementu SVG, więc potrzebowałem uzyskać macierz transformacji względem elementu zewnętrznego, który użyłby zamiast tego wartości initial coordinate system. Nadzieja, która pomaga.

Źródło

2013-06-03 10:51:36 meloncholy

+1 Jest to pomocne. Dzięki! Próbuję wymyślić rezonansowe rozwiązanie graficzne SVG dla mojej aplikacji internetowej. W [twoim artykule] (http://meloncholy.com/blog/making-responsive-svg-graphs/) wspominasz o [D3.js] (http://d3js.org/). Czy poleciłbyś to? Mam pokrewne pytanie na temat, w którym próbowałem użyć [Raphaël] (http://raphaeljs.com/): http://stackoverflow.com/questions/16848688/responsive-svg-line-graph-with- raphael Każda rada byłaby bardzo cenna! –

D3 jest świetny - jest naprawdę mocny i elastyczny, choć ma dość stromą krzywą uczenia się. Zdecydowanie [spróbuję] (http://christopheviau.com/d3_tutorial/). Mimo to, jeśli chcesz czegoś dość powszechnego, możesz szybciej uzyskać wyniki z innych bibliotek graficznych. Nie używałem Rafaela, więc nie mogę tego komentować. Możesz również rzucić okiem na [to web statystyki] (http://meloncholy.com/blog/using-d3-for-realtime-webserver-stats/) rzecz, którą zrobiłem (nie reaguje niestety, ale używa D3). Jest tutaj [wersja demo] (http://bits.meloncholy.com/mt-stats). – meloncholy

zagnieżdżanie elementów SVG może być przydatna do grupy SVG kształtuje razem i pozycja je jako zbiór. Wszystkie kształty zagnieżdżone wewnątrz elementu svg będą stanowiły element svg obejmujący. Przesuwając współrzędne xiy współrzędnego elementu svg , przesuwasz również wszystkie zagnieżdżone kształty.

Oto przykład, w którym dwa prostokąty są zagnieżdżone wewnątrz dwóch elementów svg . Z wyjątkiem kolorów dwa prostokąty mają te same definicje dla definicji dla i width. Elementy otaczające svg mają różne wartości x. Ponieważ prostokąty x-position zinterpretowane są w odniesieniu do ich obejmujących elementów svg x-position, dwa prostokąty są wyświetlane w różnych pozycjach x .

- Jakob Jenkov

<svg xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"> 
    <svg x="10"> 
    <rect x="10" y="10" height="100" width="100" 
     style="stroke:#ff0000; fill: #0000ff"/> 
    </svg> 
    <svg x="200"> 
    <rect x="10" y="10" height="100" width="100" 
     style="stroke:#009900; fill: #00cc00"/> 
    </svg> 
</svg>

Credits

Źródło

2013-06-03 05:10:14

dodaj źródłowy – chrmod

@chrmod Widziałeś link, który mówi ** ** kredyty na samym dole odpowiedź? –

Czy byłoby to dozwolone, wiele SVG? Ułatwiłoby to pozycjonowanie, jeśli możesz użyć parę 'svg' jako trochę struktury. – Martijn

Możesz zdefiniować nowy viewport & viewbox. Za pomocą tej opcji można użyć numeru relative positions, takiego jak css. Więcej informacji można znaleźć online article.

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <title>Nested SVG</title> 
 
    <style> 
 
     html, 
 
     body { 
 
      margin: 0; 
 
      padding: 0; 
 
      width: 100%; 
 
      height: 100%; 
 
      overflow: hidden; 
 
     } 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <svg width="100%" height="100%"> 
 
     <rect x="25%" y="25%" width="50%" height="50%" style="fill: dodgerblue;" /> 
 
     <svg x="25%" y="25%" width="50%" height="50%"> 
 
      <rect x="25%" y="25%" width="50%" height="50%" style="fill: tomato;" /> 
 
     </svg> 
 
    </svg> 
 
</body> 
 

 
</html>

Źródło

2017-10-12 13:25:44 Yas

Dlaczego zagnieżdżać element <svg> wewnątrz innego elementu <svg>?

Odpowiedz

Powiązane problemy