Firefox transform-origin on SVG still broken
up vote
1
down vote
favorite
When we apply a 2D CSS rotation to an SVG shape in Firefox (I'm on 63.0.1 - latest version), it gets misaligned. There are plenty of questions on this topic, eg. Setting transform-origin on SVG group not working in FireFox
I'm not seeing it as fixed, but perhaps I'm missing something. Best to look at my CodePen first: https://codepen.io/MSCAU/pen/GwozbO
Here's the gist of it:
circle {
fill: none;
transform-origin: center;
// transform-origin: 6px 6px; /* Makes no difference */
// transform-box: fill-box; /* Makes no difference */
}
circle:nth-child(1) {
stroke: red;
stroke-width: 2;
}
circle:nth-child(2) {
stroke: blue;
stroke-width: 1;
transform: rotate(-90deg);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="120" height="120">
<circle cx="6" cy="6" r="5"/>
<circle cx="6" cy="6" r="5"/>
</svg>
css firefox svg
asked 2 days ago
MSC
1,57721524
add a comment |
up vote
1
down vote
favorite
When we apply a 2D CSS rotation to an SVG shape in Firefox (I'm on 63.0.1 - latest version), it gets misaligned. There are plenty of questions on this topic, eg. Setting transform-origin on SVG group not working in FireFox
I'm not seeing it as fixed, but perhaps I'm missing something. Best to look at my CodePen first: https://codepen.io/MSCAU/pen/GwozbO
Here's the gist of it:
circle {
fill: none;
transform-origin: center;
// transform-origin: 6px 6px; /* Makes no difference */
// transform-box: fill-box; /* Makes no difference */
}
circle:nth-child(1) {
stroke: red;
stroke-width: 2;
}
circle:nth-child(2) {
stroke: blue;
stroke-width: 1;
transform: rotate(-90deg);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="120" height="120">
<circle cx="6" cy="6" r="5"/>
<circle cx="6" cy="6" r="5"/>
</svg>
css firefox svg
asked 2 days ago
MSC
1,57721524
1
Seems to be pixel snapping taking place a the wrong point. Multiplying everything by 10 fixes it. You should raise a bugzilla bug unless there already is one.
– Robert Longson
2 days ago
Yes. If I change the blue stroke-width to 0.1 or even 2 (matching the red circle), it all lines up a lot better.
– MSC
2 days ago
I have submitted the bug report: bugzilla.mozilla.org/show_bug.cgi?id=1505932
– MSC
yesterday
add a comment |
up vote
1
down vote
favorite
up vote
1
down vote
favorite
When we apply a 2D CSS rotation to an SVG shape in Firefox (I'm on 63.0.1 - latest version), it gets misaligned. There are plenty of questions on this topic, eg. Setting transform-origin on SVG group not working in FireFox
I'm not seeing it as fixed, but perhaps I'm missing something. Best to look at my CodePen first: https://codepen.io/MSCAU/pen/GwozbO
Here's the gist of it:
circle {
fill: none;
transform-origin: center;
// transform-origin: 6px 6px; /* Makes no difference */
// transform-box: fill-box; /* Makes no difference */
}
circle:nth-child(1) {
stroke: red;
stroke-width: 2;
}
circle:nth-child(2) {
stroke: blue;
stroke-width: 1;
transform: rotate(-90deg);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="120" height="120">
<circle cx="6" cy="6" r="5"/>
<circle cx="6" cy="6" r="5"/>
</svg>
css firefox svg
asked 2 days ago
MSC
1,57721524
When we apply a 2D CSS rotation to an SVG shape in Firefox (I'm on 63.0.1 - latest version), it gets misaligned. There are plenty of questions on this topic, eg. Setting transform-origin on SVG group not working in FireFox
I'm not seeing it as fixed, but perhaps I'm missing something. Best to look at my CodePen first: https://codepen.io/MSCAU/pen/GwozbO
Here's the gist of it:
circle {
fill: none;
transform-origin: center;
// transform-origin: 6px 6px; /* Makes no difference */
// transform-box: fill-box; /* Makes no difference */
}
circle:nth-child(1) {
stroke: red;
stroke-width: 2;
}
circle:nth-child(2) {
stroke: blue;
stroke-width: 1;
transform: rotate(-90deg);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" width="120" height="120">
<circle cx="6" cy="6" r="5"/>
<circle cx="6" cy="6" r="5"/>
</svg>
css firefox svg
css firefox svg
asked 2 days ago
MSC
1,57721524
asked 2 days ago
MSC
1,57721524
asked 2 days ago
MSC
1,57721524
asked 2 days ago
MSC
1,57721524
asked 2 days ago
MSC
1,57721524
1,57721524
1
Seems to be pixel snapping taking place a the wrong point. Multiplying everything by 10 fixes it. You should raise a bugzilla bug unless there already is one.
– Robert Longson
2 days ago
Yes. If I change the blue stroke-width to 0.1 or even 2 (matching the red circle), it all lines up a lot better.
– MSC
2 days ago
I have submitted the bug report: bugzilla.mozilla.org/show_bug.cgi?id=1505932
– MSC
yesterday
add a comment |
1
Seems to be pixel snapping taking place a the wrong point. Multiplying everything by 10 fixes it. You should raise a bugzilla bug unless there already is one.
– Robert Longson
2 days ago
Yes. If I change the blue stroke-width to 0.1 or even 2 (matching the red circle), it all lines up a lot better.
– MSC
2 days ago
I have submitted the bug report: bugzilla.mozilla.org/show_bug.cgi?id=1505932
– MSC
yesterday
1
1
Seems to be pixel snapping taking place a the wrong point. Multiplying everything by 10 fixes it. You should raise a bugzilla bug unless there already is one.
– Robert Longson
2 days ago
Seems to be pixel snapping taking place a the wrong point. Multiplying everything by 10 fixes it. You should raise a bugzilla bug unless there already is one.
– Robert Longson
2 days ago
Yes. If I change the blue stroke-width to 0.1 or even 2 (matching the red circle), it all lines up a lot better.
– MSC
2 days ago
Yes. If I change the blue stroke-width to 0.1 or even 2 (matching the red circle), it all lines up a lot better.
– MSC
2 days ago
I have submitted the bug report: bugzilla.mozilla.org/show_bug.cgi?id=1505932
– MSC
yesterday
I have submitted the bug report: bugzilla.mozilla.org/show_bug.cgi?id=1505932
– MSC
yesterday
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53203532%2ffirefox-transform-origin-on-svg-still-broken%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
1
Seems to be pixel snapping taking place a the wrong point. Multiplying everything by 10 fixes it. You should raise a bugzilla bug unless there already is one.
– Robert Longson
2 days ago
Yes. If I change the blue stroke-width to 0.1 or even 2 (matching the red circle), it all lines up a lot better.
– MSC
2 days ago
I have submitted the bug report: bugzilla.mozilla.org/show_bug.cgi?id=1505932
– MSC
yesterday