Jak zmienić rozmiar SVG?

mam kod jak poniżej:Jak zmienić rozmiar SVG?

<span> 
    <svg height="32" version="1.1" width="32" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; position: relative; left: -0.0166626px; top: -0.983337px;"> 
     <desc></desc> 
     <defs/> 
     <path style="" fill="#333333" stroke="none" d="M15.985,5.972C8.422,5.972,2.289999999999999,10.049,2.289999999999999,15.078C2.289999999999999,17.955,4.302999999999999...............1,27.68,22.274Z"/> 
     </svg>&nbsp; 
    </span>

I wyciąć większość treści i zastąpił go ...

to obecnie tworzy 32 32 ikonę. Co chciałbym wiedzieć, czy mogę użyć tego kodu do stworzenia ikony 100 na 100? Próbowałem zmienić szerokość i wysokość, ale nie robiło to różnicy.

Źródło

2012-03-01 Samantha J T Star

Atrybuty na elemencie SVG definiują rozmiar obszaru rysowania tylko . Nie skalują zawartości, aby dopasować ją do tego obszaru. Do tego trzeba też użyć atrybutu viewBox, tak:

<svg viewBox="0 0 32 32" height="100" width="100" ...>

Atrybut viewBox ustala układ współrzędnych, który jest używany dla wszystkich elementów podrzędnych SVG. Następnie można użyć szerokości i wysokości, aby rozciągnąć ten układ współrzędnych do pożądanego rozmiaru.

Możesz użyć atrybutu preserveAspectRatio, aby zdecydować, jak skalować, jeśli proporcje nie są zgodne.

Źródło

2012-03-01 18:40:39 mercator

Gdy szerokość svg jest większa niż jedna z punktów widzenia, nie wydaje się to działać. Mam lepsze wyniki z widged

@widged, nie powinno być żadnej różnicy między 'style' vs.' width' i "wysokość". Tak więc jedyną różnicą, jaką widzę pomiędzy twoim SVG i moim, jest to, że chcesz przeskalować duży SVG _down_ do rozmiaru ikony, podczas gdy pytanie dotyczy skalowania _up_ i wielkości ikony SVG. Metoda jest wciąż taka sama. – mercator

Wczoraj miałem dziwne zachowania, których nie mogę dziś powtórzyć. Prawdopodobnie dotyczy to literówki. Proste demo na http://bl.ocks.org/widged/8428059 pokazuje, że downsizing rzeczywiście działa tak samo z atrybutem rozmiaru lub stylem. – widged

Jak zmienić rozmiar SVG?

Odpowiedz

Powiązane problemy