How can I rotate a gradientrect diagonally properly?

[biitfit2]

I have a gradientRect as the back of my clockface svg. I want it to be rotated 45 degrees diagonally so the gradient goes from the top left to the bottom right not side to side. I've tried wrapping it in a g container

  <g transform="rotate(45)">
    <gradientRect id="bg" width="100%" height="100%" />
  </g>



#bg {
  gradient-type: "linear";
  gradient-x1: "0";
  gradient-y1: "50";
  gradient-x2: "0";
  gradient-y2: "100%-50";
  gradient-color1: "magenta";
  gradient-color2: "red";
}

It rotates the gradientrect but moves it out of place. I also need it to cover the whole screen. Any idea the best approach to have a diagonal linear gradient? Thanks!

[SunsetRunner]

Hi, I think you might need to add a translate to the group, as its coordinates are the center of its rotation , then set your gradientRect's (x,y) to its (-width/2, -height/2) to place it centered.
To enlarge the rect to cover the whole screen you could calc the needed size using good old pythagoras.

[Guy_]

@biitfit2  - not being a Mathematician, try rotating 5 degrees at a time and adjust the X & Y positions to get it in the right place.

[SunsetRunner]

To get length of the diagonal, which would be width and height needed for a 45° rotated rect it's:
needed size = squareRoot(screenWidth * screenWidth + screenHeight * screenHeight) 
Set outer g to (centerX,centerY)
the rect inside the g to (-neededSize/2, -neededSize/2)

[Sebafit]

Hi! Were you able to solve the problem? I'm stuck with this 😞

[SunsetRunner]

Hi @Sebafit ,

What is your code and how does it look  like in sim compared to what you want to achieve exactly?

Perhaps I can explain better...

[Sebafit]

I have two collision points rotating a "line" inside a box. With two coordinates I can put values into x1, y1, x2, y2 (setting the lowest into 1 and biggest into 2), but I can't simulate gradient rotation from 0 to 359 degrees 😕

I can move gradient angle inside -X, Y (first quarter) only...

[Sebafit]

If I rotate the gradientRect, the gradient color stay in original direction

[SunsetRunner]

Maybe this helps...
You can't create the gradient as diagonal, AFAIK. You need to rotate a group containing the gradient(with transform rotate)

[SunsetRunner]

oh, sounds like you want to animate the rotation angle?
This can be done on the group of course, but I don't know, if the hardware would like to render that. in that case you might perhaps try with an image instead (There has been a bug on rotating big images though cutting off parts, which could be workaround by cutting the image into pieces and arrange them inside the rotating g. Not sure, if this had been fixed meanwhile)

[Sebafit]

It's working now! I don't know why wasn't working before...

index.view

<svg>
<g id="gGradRectangle" pointer-events="visible" transform="translate(50%, 50%)">
<gradientRect id="gradRectangle" x="-238" y="-238" width="476" height="476"
gradient-type="linear"
gradient-x1="238" gradient-y1="0"
gradient-x2="238" gradient-y2="476"
gradient-color1="black"
gradient-color2="black"/>
</g>
</svg>

 app/index.js

messaging.peerSocket.onmessage = evt => {
if (evt.data.key === "degreeGradient" && evt.data.newValue) {
let degrees = JSON.parse(evt.data.newValue);
document.getElementById("gGradRectangle").groupTransform.rotate.angle = degrees;
}
}

[Sebafit]

On simulator works, but not into watch! T-T

It's like the "translate" is not working... it's decentered 😕

[Gondwana]

Just a guess: try the translate with pixel values rather than %.

And/or, declare a rotate inside your transform, even if you don't need it initially.

[Sebafit]

Not working neither

[SunsetRunner]

My last idea fir today: In the transform, did you set the translate first? I think the order is important.

If that doesn't do, you finally could try to translate in app.js...

[Gondwana]

Here's something that works for me (in a different context). I haven't tried changing the rotate angle in code.

  <g transform="translate(100%,0) rotate(90)">
    <gradientRect id="gradient" width="100%" height="100%" opacity="1"
      gradient-type="linear"
      gradient-x1="0" gradient-y1="0"
      gradient-x2="100%" gradient-y2="100%"
      gradient-color1="#102020" gradient-color2="#306060"
    />
  </g>

[Sebafit]

It's a bug... visible background behind gradient rectangle has "artifacts"...

[Sebafit]

I put 2 sliders to move X and Y offset and note than the location works, but the "paint" of gradient fails... some area is well painted and some another has "visual glitch" or "artifacts".

I readed than rotation of g is bugged since 2014... 8 years... maybe developers don't fix it never 😞

[Gondwana]

Elements that extend too far off the right side of the screen can appear cropped (ie, missing) on the left of the screen. Is that what you're seeing?

[Sebafit]

Tomorrow I'll make some test with sizes, maybe we have a size limitation rotating by code. I'll test rotation directly into view too.