eGospodarka.pl
eGospodarka.pl poleca

eGospodarka.plGrupypl.comp.wwwSVG - zmiana rozmiaru grafiki
Ilość wypowiedzi w tym wątku: 10

  • 1. Data: 2012-01-22 21:11:56
    Temat: SVG - zmiana rozmiaru grafiki
    Od: Marek <p...@s...com>

    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?


  • 2. Data: 2012-01-23 00:08:31
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: porneL <n...@p...net>

    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


  • 3. Data: 2012-01-23 07:58:37
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: Cezary Tomczyk <c...@g...pl>

    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


  • 4. Data: 2012-01-23 09:18:21
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: Marek <p...@s...com>

    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ć.


  • 5. Data: 2012-01-23 10:38:14
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: Cezary Tomczyk <c...@g...pl>

    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


  • 6. Data: 2012-01-23 11:41:29
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: porneL <n...@p...net>

    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


  • 7. Data: 2012-01-23 14:17:11
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: Marek <p...@s...com>

    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ę :-) )


  • 8. Data: 2012-01-23 15:21:29
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: Cezary Tomczyk <c...@g...pl>

    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


  • 9. Data: 2012-01-25 13:32:07
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: Paweł Piskorz <n...@p...nie?>

    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";
    }


  • 10. Data: 2012-01-25 13:48:26
    Temat: Re: SVG - zmiana rozmiaru grafiki
    Od: Cezary Tomczyk <c...@g...pl>

    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/

strony : [ 1 ]


Szukaj w grupach

Szukaj w grupach

Eksperci egospodarka.pl

1 1 1

Wpisz nazwę miasta, dla którego chcesz znaleźć jednostkę ZUS.

Wzory dokumentów

Bezpłatne wzory dokumentów i formularzy.
Wyszukaj i pobierz za darmo: