2009-09-23 29 views
5

Zajmuję się tworzeniem programu generującego pliki svg na podstawie wyborów dokonywanych przez użytkownika. Jedną z tych opcji jest dołączenie innego pliku svg skupionego na określonym punkcie w pierwszym. Drugi plik ma nieznany współczynnik proporcji i rozmiar, ale powinien być skalowany do określonego maksymalnego rozmiaru jako wysokość lub szerokość i powinien być wyśrodkowany na jednym określonym punkcie. Metoda, której teraz używam, to mieć znacznik G, który zawiera znacznik SVG dołączonego obrazu, i wykonać transformację na znaczniku G, aby skalować i tłumaczyć. Czy istnieje sposób na wykonanie skali w celu uzyskania określonego rozmiaru bez znajomości rozmiaru obrazu? Czy jest jakiś sposób na przetłumaczone współrzędne, aby zastosować je do środka obrazu zamiast do lewego górnego rogu? Jestem bardzo nowy w SVG, więc może to być niewłaściwy sposób. Czy jest chyba lepszy sposób na uzyskanie tych samych wyników?Jak wyśrodkować i przeskalować pliki SVG w innym pliku SVG

+0

To wstyd, że nie ma odpowiedzi na to pytanie może być powinny być bardziej szczegółowe lub być retagged? – Parsa

Odpowiedz

0

Chyba chcesz najpierw drugi plik SVG ukryte, wezwanie .getBBox() w JavaScript zrobić kilka prostych obliczeń, ustawić odpowiednie parametry, go odkryć,

0

Rozumiem, co masz na myśli, albo przynajmniej ja Przemyśl to. Nie ma lepszego pomysłu, aby to zrobić zamiast grupowania. Dla mnie <g> jest najlepszym sposobem na manipulowanie jednym fragmentem dokumentu SVG. Ale moim zdaniem, uważam element <rect> za kontener danych wizualnych. Może wtedy <g> nie będzie konieczne, zależy od wymagań kodowania.

Jeśli trzeba umieścić tylko proste SVG zdjęcie można zrobić to lubią:

<image id="yourSVGImage" xlink:href="yourImg.svg" 
     x="24px" y="50px" width="527px" height="328px" 
      preserveAspectRatio="XMinYMin meet"/> 

Jeśli wyrazić „width” i „height” w jednostkach stałych (takich jak pikselach) można osiągnąć to, co ja” m myślisz, czego potrzebujesz. Również "preserveAspectRatio" pozwala wyświetlić ten atrybut, jeśli tego potrzebujesz.

0

Edytuj: ta odpowiedź wymaga znajomości rozmiaru wewnętrznej strony SVG. Najbardziej niezależnym sposobem jest użycie metody getBBox() po stronie przeglądarki, prawdopodobnie przy użyciu visibility lub display, aby uniemożliwić użytkownikom wyświetlanie nieskalowanej grafiki. Aktualizacja jsFiddle example w celu użycia tej metody.


Do skalowania użyj viewBox attribute. Z dokumentacji W3C:

Często pożądane jest określenie, że dany zestaw odcinków graficznych pasuje do konkretnego elementu kontenera. Atrybut "viewBox" zapewnia taką możliwość.

Wszystkie elementy, które ustanawiają nową rzutnię (patrz elements that establish viewports), ... mają atrybut "widokBox". Wartością atrybutu "viewBox" jest lista czterech liczb: <min-x>, <min-y>, <width> i <height>, ... która określa prostokąt w przestrzeni użytkownika, który powinien być zmapowany do granic widoczności ustalonej przez dany element, biorąc pod uwagę konto attribute ‘preserveAspectRatio’.

ilustruje użycie atrybutu "viewBox" na najbardziej zewnętrznym elemencie svg, aby określić, że zawartość SVG powinna rozciągać się w celu dopasowania do granic widoczności.

Powyższy przykład określa preserveAspectRadio jak none, więc osadzone SVG rozciąga się dopasować SVG pojemnik dokładnie. Domyślna wartość preserveAspectRadio, która jest xMidYMid meet, powinna pasować do twoich potrzeb. Ten atrybut umożliwia precyzyjną kontrolę nad wartością how to scale and position the enclosed graphics.

Po przeskalowaniu wewnętrznego SVG do znanego rozmiaru przy pomocy viewBox, centrowanie powinno odbyć się w sposób prosty i przy użyciu atrybutu transform. Tutaj okrojona przykład z http://jsfiddle.net/ento/hPuBY/:

<g transform="translate(125, 125)"> 
    <!-- inner SVG is scaled to fit 150x150 --> 
    <svg width="150" height="150" viewBox="0 0 1500 1000"> 
    <!-- coordinate system inside the SVG is 0x0 <> 1500x1000 --> 
    <rect width="1500" height="1000" /> 
    <text x="750" y="550" font-size="150"> 
     Embedded SVG 
    </text> 
    </svg> 
</g>