Ten przykład wyciągnąć dwa koło w pudełku o 10 x 10.

<svg width="10" height="10" viewbox="0 0 10 10">
    <circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A-->
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
</svg>

Zakreśl mieć taki sam rozmiar jak okrąg B. Załóżmy, że chcę zmienić rozmiar SVG do 100 x 100 takich jak:

<svg width="100" height="100" viewbox="0 0 10 10">
    <circle cx="2" cy="2" r="2" fill="purple" /> <!-- circle A-->
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
</svg>

Rozmiar kręgów zostanie zmieniony. Jak dokonać konkretnego elementu wewnątrz SVG, powiedzmy tylko okrąg tylko, więc nie wpływa na zmianę.

svg
0
smftr 16 luty 2017, 18:34

2 odpowiedzi

Najlepsza odpowiedź

Zrobiłem kolejną próbkę. Używam zagnieżdżonego elementu SVG w celu podzielonego efektu widoku. Możesz umieścić w kształcie węzłów względny pozycję przy użyciu wartości procentowej, ale ta technika nie jest przydatna do ogólnych kształtów ścieżek. Ponieważ używam elementu "Użyj" do podzielonego kształtu definicji i pozycjonowania.

<svg width="100" height="100">
    <defs>
        <!--shape definition-->
        <circle r="2" fill="red" id="circleA"/> <!-- circle A-->
    </defs>
    <!--parcentage positioning by viewport-->
    <use x="20%" y="20%" xlink:href="#circleA"/>
    <svg viewBox="0 0 10 10">
        <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
    </svg>
</svg>
1
defghi1977 17 luty 2017, 01:55

Masz na myśli coś takiego?

<svg width="100" height="100" viewbox="0 0 10 10">
    <rect x="2" y="2" width="0.001" height="0.001" 
        stroke="red" stroke-width="4" stroke-linejoin="round" 
        vector-effect="non-scaling-stroke"/> <!-- circle A-->
    <circle cx="4" cy="4" r="2" fill="purple" /> <!-- circle B-->
</svg>

Ale nie znam każdej przeglądarki obsługuje właściwość efektu wektora.

0
defghi1977 16 luty 2017, 21:28