Jak tłumaczyć grupę SVG przez procent widoczności

Question

Mam svg <rect>, który jest w <g> (grupa) i chciałbym przeskalować go, a następnie przetłumaczyć go na procent widoczność. Większość wszystkiego w svg pozwala na specyfikację jednostek poprzez śmieszną liczbę opcji; na przykład px, em,%, ex, pt, pc, ... Wydaje się jednak, że liczba podana w tłumaczeniu to tylko piksele.

Chodzi o to, że jeśli muszę wrócić i przeliczyć wartości pikseli do tłumaczenia, to mój svg staje się zależny od rozdzielczości. Wtedy ja, ty i wszyscy zostaniecie wciągnięci w paradoks. Możesz zobaczyć, dlaczego jestem trochę zaniepokojony.

<svg> 
    <g transform="scale(1, 1) translate(0, 0)"> 
    <rect x="45%" y="25%" height="50%" width="10%"/> 
    </g> 
</svg> 

http://jsbin.com/ubeqot/1/edit

Answer 1

stick element <g> w wewnętrznej <svg> elementu dodać X i Y z wartości atrybutów procentowe wewnętrznej <svg> elementu, to tłumaczyć.

<svg> 
    <svg x="10%" y="20%"> 
    <g transform="scale(1, 1)"> 
     <rect x="45%" y="25%" height="50%" width="10%"/> 
    </g> 
    </svg> 
</svg> 

Jeśli chcesz skala zastosować pierwszy będzie można umieścić wewnątrz elementu <svg><g> zamiast.