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
Odpowiedz
Chyba chcesz najpierw drugi plik SVG ukryte, wezwanie .getBBox() w JavaScript zrobić kilka prostych obliczeń, ustawić odpowiednie parametry, go odkryć,
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.
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>
- 1. Jak dodać "kliknij i przeciągnij", aby przeskalować obraz w SVG?
- 2. Jak wyśrodkować etykietę Bootstrap na SVG?
- 3. Jak przekonwertować pliki WMF na pliki SVG
- 4. Jak skompresować pliki .svg w programie IIS?
- 5. Inline SVG vs SVG Wydajność pliku
- 6. Jak przeskalować SVG, który ma niektóre złożone definicje ścieżek?
- 7. SVG - Oblicz macierz transformacji do formatu SVG z innym viewbox
- 8. Jak otwierać i renderować pliki SVG w środowisku .NET?
- 9. Jak wyrenderować * części * pliku svg?
- 10. Jak wyśrodkować tekst obrócony o 90º w SVG
- 11. Skalowanie SVG w Javie
- 12. Jak zapisać kod svg jako obraz .svg?
- 13. Raphael JS - Użyj pliku SVG
- 14. Importowanie pliku svg matplotlib figure
- 15. Ładowanie i wyświetlanie svg
- 16. Jeden plik SVG, wiele gradientów SVG wewnątrz
- 17. JavaScript createElement i SVG
- 18. Jak załadować i analizować dokumenty SVG
- 19. Chrome nie ładuje SVG, jak plik image/svg + xml
- 20. Określ SVG jako obraz tła i również styl SVG w CSS?
- 21. Jak zapisać/wyeksportować plik SVG po utworzeniu SVG w D3.js (IE, safari i chrome)?
- 22. Jak wyświetlić SVG w Eclipse?
- 23. Jak zmienić rozmiar SVG?
- 24. Odcięcie SVG
- 25. Photoshop Layer -> SVG
- 26. Jak zdobyć ScrollBars w SVG?
- 27. SVG animacja w węża
- 28. Skalowanie SVG w javascript
- 29. Element grupy środkowej wewnątrz svg
- 30. Jak tłumaczyć grupę SVG przez procent widoczności
To wstyd, że nie ma odpowiedzi na to pytanie może być powinny być bardziej szczegółowe lub być retagged? – Parsa