SVG-Muster Füllposition von oben rechts, anstatt oben links

Question

Ist es möglich, den Startpunkt der SVG-Musterfüllung von oben rechts statt von oben links zuzuordnen?

Zum Beispiel hat CSS background-position, aber ich habe Probleme, eine SVG-Alternative zu finden, die die gleiche Funktionalität ermöglicht.

Hier ist ein CSS Beispiel dafür, was ich versuche, mit SVG Musterfüllung zu erreichen: https://jsfiddle.net/19bc20p6/

Und so weit habe ich mit dem SVG bekommen: https://jsfiddle.net/56cp4xwh/

Answer 1

Das Äquivalent des blauen mustern in SVG ist wie folgt:

<svg width="50vw" height="100vh"> 
 
    <defs> 
 
    <linearGradient id="blue" x1="100%" y1="100%" x2="0%" y2="0%"> 
 
     <stop offset="50%" stop-color="skyblue"/> 
 
     <stop offset="50%" stop-color="navy"/> 
 
    </linearGradient> 
 
    <pattern id="panel-one" patternUnits="userSpaceOnUse" width="20" height="20" x="100%" y="0%"> 
 
     <rect width="20" height="20" fill="url(#blue)"/> 
 
    </pattern> 
 
    </defs> 
 
    <rect width="100%" height="100%" fill="url(#panel-one)"/> 
 
</svg>

Die x und y Attribute des <pattern> Element effektiv Legen Sie den Ursprung des Musters fest. Um es oben rechts zu setzen, würden Sie es auf x="100%" y="0%" setzen, wie ich hier getan habe.

Answer 2

s es möglich, die zuweisen Startpunkt der Svg-Musterfüllung von oben rechts statt von oben links?

für diese Verwendung transform: rotieren (0deg);

ich denke, seine Arbeit