Czy ktoś z Was trenował na SVG czy i jak działa zmiana rozmiarów grafiki po
jej narysowaniu?

Chodzi mi o zrobienie dla przykładu rozwijanego drzewka katalogów - tak jak
w eksploratorze Windows. Jeśli osadzam plik SVG w HTMLu, to muszę
zadeklarować jego konkretne wymiary a tymczasem nie wiem jakiej wysokości
będzie w/w struktura katalogów. Byłoby też absurdalne rezerwowanie na SVG
wysokości np 3000px. Przy niewielkiej ilości katalogów powstała by bardzo
wysoka biała strona - długo można by ją przewijać w poszukiwaniu niczego na
jej spodzie :-) Pomyślałem więc, że SVG mógłby za pomocą JS ulegać zmianie
wysokości. No i teraz kwestia: jak się zachowa taki SVG? Czy jeśli zwiększę
wysokość gdy już coś będzie narysowane to co się z tym stanie? Zdeformuje
się nieproporcjonalnie, a może proporcjonalnie? Czy może tylko canvas
powiększy się? Jeśli to ostatnie, to gdzie rysunek wyświetli się?
Centralnie na wysokości czy u góry? I czy tak samo na wszystkich
przeglądarkach to zadziała?

do góry

On Sun, 22 Jan 2012 21:11:56 -0000, Marek <p...@s...com> wrote:

> Czy ktoś z Was trenował na SVG czy i jak działa zmiana rozmiarów grafiki
> po jej narysowaniu?

<svg viewBox="" preserveAspectRatio=""> reguluje jaka jest skala grafiki i
jak ma się rozciągać.


--
regards, porneL

do góry

W dniu 2012-01-23 01:08, porneL pisze:
> On Sun, 22 Jan 2012 21:11:56 -0000, Marek <p...@s...com> wrote:
>
>> Czy ktoś z Was trenował na SVG czy i jak działa zmiana rozmiarów
>> grafiki po jej narysowaniu?
>
> <svg viewBox="" preserveAspectRatio=""> reguluje jaka jest skala grafiki
> i jak ma się rozciągać.

Dodam od siebie, że praktyka moja pokazała podczas generowania wykresów
opartych o SVG (raphael + elycharts), że dynamiczne dopasowanie SVG do
rozmiarów rodzica wcale nie jest takie proste. Każda zmiana rozmiarów
okna przeglądarki skutkowała przerysowaniem wykresu od nowa. Nie dało
się tego regulować za pomocą viewBox-a.

Wynikało to z tego, że wykres rysował się w odniesieniu do rozmiarów
rodzica i wszystkie punkty były oparte o wartości bezwzględne px.

Niby jest parametr currentScale
(https://developer.mozilla.org/en/DOM/SVGSVGElement)
, ale on albo nie
działa, albo źle go używałem ;-)

Natomiast zupełnie inaczej jest wtedy, gdy SVG będzie jako <object>:
<object width="auto" data="test.svg" type="image/svg+xml"></object>

Wówczas <object> dało się łatwo dynamicznie skalować.

--
Cezary Tomczyk

do góry

Dzięki Wam za wyczerpujące informacje.

W moim przypadku sprawa jest nieco prostsza. Mianowicie to SVG samo
podejmuje decyzję kiedy ma się przeskalować. Jego wielkość nie zależy od
wielkości okna przeglądarki.

Powiedz mi tylko czy <svg> w omawianym względzie źle działa na konkretnej
przegladarce czy generalnie?

Piszesz też, żewszystkie punkty były bezwzglednymi wartościami px. Czy
chciałeś przez to powiedzieć, że currentScale skutkował dopiero w stosunku
do nowo rysowanych obiektów? Pytam bardziej z ciekawości gdyż nie zamierzam
skalować swojej grafiki a tylko powiększać jej "canvas" aby więcej
elementów można było przedstawić.

do góry

W dniu 2012-01-23 10:18, Marek pisze:
> Dzięki Wam za wyczerpujące informacje.
>
> W moim przypadku sprawa jest nieco prostsza. Mianowicie to SVG samo
> podejmuje decyzję kiedy ma się przeskalować. Jego wielkość nie zależy od
> wielkości okna przeglądarki.

SVG samo nie podejmie decyzji o przeskalowaniu się ;-)

> Powiedz mi tylko czy<svg> w omawianym względzie źle działa na konkretnej
> przegladarce czy generalnie?

Z mojego doświadczenia wynika, że SVG generalnie działa dość dobrze.
Choć miałem obiekt, który był złożony z paru tysięcy punktów i wszystkie
przeglądarki "wymiękły" podczas renderowania obiektu. Widać było
wyraźnie, że nie dają rady (widać było jak powoli przeglądarka składa
obiekt "do całości").

No ale to był wyjątek i poszedłem w stronę zmniejszenia liczby punktów,
co poskutkowało tym, że znacznie lepiej zaczął obiekt być renderowany.

Co do skalowania, to trochę wina i przeglądarek i tych, co tworzą gotowe
biblioteki do generowania wykresów. Przetestowałem naście różnych
bibliotek do wykresów z tych nie płatnych i płatnych. Żadna nie miała
funkcji "resize", które notabene jest po prostu od nowa narysowaniem
wykresu.

Sądziłem, że parametr currentScale w moim przypadku ładnie zadziała, ale
nie zadziałał. Tzn. w jakiś jednym teście SVG udało mi się raz go
uruchomić, ale potem gdzieś plik z testem zapodział mi się. Samych
wykresów jednak nie udało mi się łatwo skalować przy użyciu tylko
wewnętrznych metod przeglądarki, bez ponownego renderowania obiektu.

Kolejną rzeczą jest to, że można dosyć swobodnie mieszać SVG i CSS. Nie
jest aż tak różowo, ale warto poeksperymentować. Już teraz dokładnie nie
pamiętam gdzie był problem na linii SVG<->CSS, ale np. nakładanie tła na
poszczególne "warstwy" na już istniejący obiekt wymaga nieco "gmerania"
w kodzie SVG.

> Piszesz też, żewszystkie punkty były bezwzglednymi wartościami px. Czy
> chciałeś przez to powiedzieć, że currentScale skutkował dopiero w stosunku
> do nowo rysowanych obiektów? Pytam bardziej z ciekawości gdyż nie zamierzam
> skalować swojej grafiki a tylko powiększać jej "canvas" aby więcej
> elementów można było przedstawić.

currentScale jest współczynnikiem skali i powinno skalować obiekt, ale z
jakiś powodów nie do końca to udało mi się opanować. Sądzę, że to
kwestia czasu. Przydatne mi to by było, kiedy robiłem dynamicznie
skalowanie obiektu w zależności od wielkości okna przeglądarki. Lepsze
to, niż overflow:hidden ;-)

--
Cezary Tomczyk

do góry

On Mon, 23 Jan 2012 07:58:37 -0000, Cezary Tomczyk <c...@g...pl>
wrote:

> Wynikało to z tego, że wykres rysował się w odniesieniu do rozmiarów
> rodzica i wszystkie punkty były oparte o wartości bezwzględne px.

px nie powinno być problemem, bo w SVG wybierasz sobie wielkość "świata"
przez viewBox i potem tylko używasz absolutnych wymiarów w wybranej skali.
Możesz sobie zrobić viewBox 0-100 i udawać, że masz wielkości w
procentach, a nie pikselach.

--
regards, porneL

do góry

Dnia Mon, 23 Jan 2012 11:38:14 +0100, Cezary Tomczyk napisał(a):

>
> SVG samo nie podejmie decyzji o przeskalowaniu się ;-)

No jak to nie ? :-D
W skrypcie wewnątrz SVG:
if (canvasPoAktualizacji.height>defaultHeight)
przeskalujZewnetrznymJS(canvasPoAktualizacji.height)
;

(a za resztę informacji dziękuję :-) )

do góry

W dniu 2012-01-23 12:41, porneL pisze:
> On Mon, 23 Jan 2012 07:58:37 -0000, Cezary Tomczyk
> <c...@g...pl> wrote:
>
>> Wynikało to z tego, że wykres rysował się w odniesieniu do rozmiarów
>> rodzica i wszystkie punkty były oparte o wartości bezwzględne px.
>
> px nie powinno być problemem, bo w SVG wybierasz sobie wielkość "świata"
> przez viewBox i potem tylko używasz absolutnych wymiarów w wybranej
> skali. Możesz sobie zrobić viewBox 0-100 i udawać, że masz wielkości w
> procentach, a nie pikselach.

Wielkość "świata" za pomocą viewBox-a można ustawić, ale nie o to
chodzi. W rzeczywistości po wygenerowaniu obiektu SVG nie jest już tak
łatwo go skalować. A przynajmniej mnie nie udało się skalować
generowanych wykresów przez różne biblioteki w prosty sposób. Poza
oczywiście wygenerowaniem go od nowa przy każdej potrzebie.

--
Cezary Tomczyk

do góry

W dniu 2012-01-23 11:38, Cezary Tomczyk pisze:
> Kolejną rzeczą jest to, że można dosyć swobodnie mieszać SVG i CSS. Nie
> jest aż tak różowo, ale warto poeksperymentować. Już teraz dokładnie nie
> pamiętam gdzie był problem na linii SVG<->CSS, ale np. nakładanie tła na
> poszczególne "warstwy" na już istniejący obiekt wymaga nieco "gmerania"
> w kodzie SVG.

Czy chodzi Ci może o to, że zamiast CSSowego background trzeba
skorzystać z fill w SVG?


--
message[autor="PablO"]::after {
content:"Pozdrawiam";
}

do góry

W dniu 2012-01-25 14:32, Paweł Piskorz pisze:
> W dniu 2012-01-23 11:38, Cezary Tomczyk pisze:
>> Kolejną rzeczą jest to, że można dosyć swobodnie mieszać SVG i CSS. Nie
>> jest aż tak różowo, ale warto poeksperymentować. Już teraz dokładnie nie
>> pamiętam gdzie był problem na linii SVG<->CSS, ale np. nakładanie tła na
>> poszczególne "warstwy" na już istniejący obiekt wymaga nieco "gmerania"
>> w kodzie SVG.
>
> Czy chodzi Ci może o to, że zamiast CSSowego background trzeba
> skorzystać z fill w SVG?

Tak.

--
Cezary Tomczyk
http://www.ctomczyk.pl/

do góry