CSS doğrusal degrade davranışını tam olarak kopyalayan bir şekilde SVG doğrusal gradyanını belirtmek isterim. Örneğin bir CSS gradyanında, sırasıyla bir kutunun üst sol ve sağ alt kısmında bir degrade başlangıcını ve bitişini belirtebilirsiniz. Bir kutu yeniden boyutlandırıldığında, arka plan gradyanı otomatik olarak yeni boyuta uyarlanır. İlk girişimdeBir açı açısından svg doğrusal gradyan nasıl belirtilir?
, bir açı belirleyerek ve X1, Y1, x2 hesaplanarak, SVG bir CSS lineer gradyanı çoğaltılmış, y2 kutusu boyutunda koordinatları. Ancak kutu yeniden boyutlandırılırsa, degradenin açısı değişmez ve artık doğru olmaz. (Tüm koordinatları yeniden hesaplamalıyım).
Bir sonraki denemem degradeyi döndürmek için bir dönüşüm kullanmaktı. İşte bazı kod:
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
<linearGradient id="g1" gradientUnits="userSpaceOnUse"
gradientTransform="rotate(-45 150 50)">
<stop stop-color="#FF0000" offset="0"/>
<stop stop-color="#00FF00" offset="0.5"/>
<stop stop-color="#0000FF" offset="1"/>
</linearGradient>
<rect x="0" y="0" width="100%" height="100%" fill="url(#g1)" />
</svg>
Şimdi, bu boyut (300100) bir kutu için çalışır ancak ben dönme merkezinin (150,50) için mutlak değerleri belirtmek için yaşıyorum göreceksiniz.
Merkezi yüzde olarak belirtebilir miyim? Sonunda gradyanın açısını kutunun boyutlarına uyarlamayı istiyorum.
gradientUnits = "objectBoundingBox" gradientTransform = "döndür (-45 0.5 0.5)" ne arıyorsunuz? –
Ben bunu denedim çünkü objectBoundingBox kullanarak başladım ama başka bir deneyin vereceğim ... – Jules
Sadece tekrar denedim ve işe yaramıyor. Göründüğü gibi kare bir kutudaki döndürülmüş eğimi hesaplamak, böylece -45 için bir köşeden diğerine gider. Sonra genişliğini germek, degradi olduğu gibi bırakır. Kutu 100x100 olsaydı, açı doğru olurdu, ama benim örneğimde, açı yanlış biter. – Jules