SVG Linearer Farbverlauf Skalierung und Übersetzung Frage

Question

Ich habe den folgenden radialen Farbverlauf:

<radialGradient
   inkscape:collect="always"
   xlink:href="#linearGradient2454"
   id="radialGradient2460"
   cx="4022.8572"
   cy="5451.2656"
   fx="4022.8572"
   fy="5451.2656"
   r="3559.865"
   gradientTransform="matrix(-0.1071067,-0.1166362,0.1377765,-7.0459663e-2,276.61943,1452.439)"
   gradientUnits="userSpaceOnUse" />

Ich möchte diesen Farbverlauf um 90 % verkleinern und ihn auf der Grundlage dieser neuen Skala entsprechend übersetzen (x-Position wird zu 402,2, y-Position zu 545,1 usw.).

Offensichtlich wird die Multiplikation von cx, cy, fx, fy und r mit .1 mich einen Teil des Weges dorthin bringen. Aber wie kann ich programmatisch die gradientTransform überarbeiten, um den Rest des Weges zu bekommen?

Answer 1

Ich würde die Parameter (cx, fx, r usw.) unangetastet lassen. Multiplizieren Sie einfach die vorhandene Transformationsmatrix mit einer neuen Matrix für die Skalierung. Die resultierende Matrix ist die neue Transformationsmatrix für Ihren Gradienten.

Wenn Sie um den Mittelpunkt herum skalieren wollen, müssen Sie in der Skalierungsmatrix auch eine Verschiebung hinzufügen.

Dies würde also für den Skalierungsfaktor s = 0,1 gelten:

newGradientTansform = 
oldGradienTransform * matrix(s, 0, 0, s, -cx*(s-1), -cy*(s-1))