The 1st image is my code now. My question is, if I wanted to rotate the the whole thing so it looks like the below image, what code would I add to it?
https://jsfiddle.net/jw1euh11/
What it looks like now.
I want to Rotate it to This
<svg width="266" height="266" viewBox="0 0 266 266">
<text x="100" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
<text x="197" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
<line x1="264" y1="1" x2="0" y2="1"
style="stroke: #0059dd; stroke-width: 3;"/>
<line x1="265" y1="265" x2="265" y2="0"
style="stroke: #0059dd;stroke-width: 3; "/>
<line x1="100%" y1="265" x2="0" y2="265"
style="stroke: #0059dd ; stroke-width: 3;"/>
<line x1="1" y1="100%" x2="1" y2="0"
style="stroke:#0059dd;stroke-width: 3; "/>
<line x1="0" y1="0" x2="100%" y2="100%"
style="stroke:#0059dd; stroke-width:3" />
<line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:#0059dd; stroke-width:3"/>
</svg>
You can use group <g>...</g> to rotate all together.
<svg width="266" height="266" viewBox="0 0 266 266">
<g transform="rotate(-44, 80, 120)">
<text x="100" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
<text x="197" y="15" fill="red" transform="rotate(44, 10,40)">Play </text>
<line x1="264" y1="1" x2="0" y2="1"
style="stroke: #0059dd; stroke-width: 3;"/>
<line x1="265" y1="265" x2="265" y2="0"
style="stroke: #0059dd;stroke-width: 3; "/>
<line x1="100%" y1="265" x2="0" y2="265"
style="stroke: #0059dd ; stroke-width: 3;"/>
<line x1="1" y1="100%" x2="1" y2="0"
style="stroke:#0059dd;stroke-width: 3; "/>
<line x1="0" y1="0" x2="100%" y2="100%"
style="stroke:#0059dd; stroke-width:3" />
<line x1="0" y1="100%" x2="100%" y2="0"
style="stroke:#0059dd; stroke-width:3"/>
</g>
</svg>
Related
I'm trying to build an SVG using transform attribute. But while my SVG looks as expected in Chrome and Firefox it looks broken in Safari. It looks like Safari doesn't respect transform-origin attribute and always applies the transform like transform-origin has "0 0" value.
I need to animate transform attribute and I need the resulting SVG to look the same in all browsers. I tried to work around the issue by providing different values to transform-box CSS property, but without success.
Is there any workaround for the issue?
Below is an example illustrating the issue. All images should look the same. They look the same in Chrome and Firefox, but not in Safari.
h1 {
font-family: sans-serif;
}
figure {
border: thin #c0c0c0 solid;
display: inline-flex;
flex-flow: column;
padding: 5px;
max-width: 200px;
margin: auto;
}
figcaption {
margin-top: 5px;
background-color: #222;
color: #fff;
font: smaller sans-serif;
padding: 3px;
text-align: center;
}
<h1>1. Reference image</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="100" stroke="none" fill="black"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
<circle cx="100" cy="100" r="75" stroke="none" fill="blue"/>
<line x1="100" y1="25" x2="100" y2="175" stroke="rebeccapurple" stroke-width="1.5"/>
<line x1="25" y1="100" x2="175" y2="100" stroke="rebeccapurple" stroke-width="1.5"/>
<circle cx="100" cy="100" r="50" stroke="none" fill="red"/>
<line x1="100" y1="50" x2="100" y2="150" stroke="rebeccapurple" stroke-width="1"/>
<line x1="50" y1="100" x2="150" y2="100" stroke="rebeccapurple" stroke-width="1"/>
<circle cx="100" cy="100" r="25" stroke="none" fill="yellow"/>
<line x1="100" y1="75" x2="100" y2="125" stroke="rebeccapurple" stroke-width="0.5"/>
<line x1="75" y1="100" x2="125" y2="100" stroke="rebeccapurple" stroke-width="0.5"/>
</svg>
<figcaption>Figure 1. Reference image, <code>transform</code> is not used. All other images should look the same.</figcaption>
</figure>
<h1>2. <code>transform</code> applied to <code><g></code> element</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-1">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-1" fill="black"/>
<use href="#target-g-1" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<use href="#target-g-1" fill="red" transform="scale(0.5 0.5)" transform-origin="100 100"/>
<use href="#target-g-1" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 100"/>
</svg>
</svg>
<figcaption>Figure 2-1. Nested <code><svg></code> has the same size as the outermost <code><svg></code>.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-2">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-2" fill="black"/>
<use href="#target-g-2" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-g-2" fill="red" transform="scale(0.5 0.5)" transform-origin="100 0"/>
<use href="#target-g-2" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 33.3333"/>
</svg>
</svg>
<figcaption>Figure 2-2. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-3">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-3" fill="black"/>
<use href="#target-g-3" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-g-3" fill="red" transform="scale(0.5 0.5)" transform-origin="0 0"/>
<use href="#target-g-3" fill="yellow" transform="scale(0.25 0.25)" transform-origin="33.3333 33.3333"/>
</svg>
</svg>
<figcaption>Figure 2-3. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.</figcaption>
</figure>
<h1>3. <code>transform</code> applied to <code><svg></code> element</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-1" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-1" fill="black"/>
<use href="#target-svg-1" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<use href="#target-svg-1" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="100 100"/>
<use href="#target-svg-1" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 100"/>
</svg>
</svg>
<figcaption>Figure 3-1. Nested <code><svg></code> has the same size as the outermost <code><svg></code>.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-2a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-2a" x="0" y="0" fill="black"/>
<use href="#target-svg-2a" x="0" y="0" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-svg-2a" x="0" y="-50" fill="red" transform="scale(0.5 0.5)" transform-origin="100 50"/>
<use href="#target-svg-2a" x="0" y="-50" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 50"/>
</svg>
</svg>
<figcaption>
Figure 3-2a. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.
Transformed <code><svg></code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-2b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-2b" x="0" y="0" fill="black"/>
<use href="#target-svg-2b" x="0" y="0" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-svg-2b" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="100 0"/>
<use href="#target-svg-2b" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="100 33.333333"/>
</svg>
</svg>
<figcaption>
Figure 3-2b. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.
<code>transform-origin</code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-3a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-3a" fill="black"/>
<use href="#target-svg-3a" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-svg-3a" x="-50" y="-50" fill="red" transform="scale(0.5 0.5)" transform-origin="50 50"/>
<use href="#target-svg-3a" x="-50" y="-50" fill="yellow" transform="scale(0.25 0.25)" transform-origin="50 50"/>
</svg>
</svg>
<figcaption>
Figure 3-3a. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.
Transformed <code><svg></code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-3b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-3b" fill="black"/>
<use href="#target-svg-3b" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-svg-3b" x="0" y="0" fill="red" transform="scale(0.5 0.5)" transform-origin="0 0"/>
<use href="#target-svg-3b" x="0" y="0" fill="yellow" transform="scale(0.25 0.25)" transform-origin="33.333333 33.333333"/>
</svg>
</svg>
<figcaption>
Figure 3-3b. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.
<code>transform-origin</code> is shifted.
</figcaption>
</figure>
Safari has implemented very little of SVG 2 - so the safe way is to only use SVG 1.1 capabilities for cross-browser (there is no transform-origin in SVG 1.1).
The cross-browser way to do this in SVG 1.1. is to transform/translate to the origin, do the scale and then reverse the translation. Something like:
transform="translate(100 200) scale(0.5 0.5) translate(-100 -200)"
Using this technique, the snippet from the question would transform into:
h1 {
font-family: sans-serif;
}
figure {
border: thin #c0c0c0 solid;
display: inline-flex;
flex-flow: column;
padding: 5px;
max-width: 200px;
margin: auto;
}
figcaption {
margin-top: 5px;
background-color: #222;
color: #fff;
font: smaller sans-serif;
padding: 3px;
text-align: center;
}
<h1>1. Reference image</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<circle cx="100" cy="100" r="100" stroke="none" fill="black"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
<circle cx="100" cy="100" r="75" stroke="none" fill="blue"/>
<line x1="100" y1="25" x2="100" y2="175" stroke="rebeccapurple" stroke-width="1.5"/>
<line x1="25" y1="100" x2="175" y2="100" stroke="rebeccapurple" stroke-width="1.5"/>
<circle cx="100" cy="100" r="50" stroke="none" fill="red"/>
<line x1="100" y1="50" x2="100" y2="150" stroke="rebeccapurple" stroke-width="1"/>
<line x1="50" y1="100" x2="150" y2="100" stroke="rebeccapurple" stroke-width="1"/>
<circle cx="100" cy="100" r="25" stroke="none" fill="yellow"/>
<line x1="100" y1="75" x2="100" y2="125" stroke="rebeccapurple" stroke-width="0.5"/>
<line x1="75" y1="100" x2="125" y2="100" stroke="rebeccapurple" stroke-width="0.5"/>
</svg>
<figcaption>Figure 1. Reference image, <code>transform</code> is not used. All other images should look the same.</figcaption>
</figure>
<h1>2. <code>transform</code> applied to <code><g></code> element</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-1">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-1" fill="black"/>
<use href="#target-g-1" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<use href="#target-g-1" fill="red" transform="translate(100 100) scale(0.5 0.5) translate(-100 -100)"/>
<use href="#target-g-1" fill="yellow" transform="translate(100 100) scale(0.25 0.25) translate(-100 -100)"/>
</svg>
</svg>
<figcaption>Figure 2-1. Nested <code><svg></code> has the same size as the outermost <code><svg></code>.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-2">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-2" fill="black"/>
<use href="#target-g-2" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-g-2" fill="red" transform="translate(100 0) scale(0.5 0.5) translate(-100 -0)"/>
<use href="#target-g-2" fill="yellow" transform="translate(100 33.3333) scale(0.25 0.25) translate(-100 -33.3333)"/>
</svg>
</svg>
<figcaption>Figure 2-2. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<g id="target-g-3">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</g>
</defs>
<use href="#target-g-3" fill="black"/>
<use href="#target-g-3" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-g-3" fill="red" transform="translate(0 0) scale(0.5 0.5) translate(-0 -0)"/>
<use href="#target-g-3" fill="yellow" transform="translate(33.3333 33.3333) scale(0.25 0.25) translate(-33.3333 -33.3333)"/>
</svg>
</svg>
<figcaption>Figure 2-3. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.</figcaption>
</figure>
<h1>3. <code>transform</code> applied to <code><svg></code> element</h1>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-1" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-1" fill="black"/>
<use href="#target-svg-1" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="0" width="200" height="200" viewBox="0 0 200 200">
<use href="#target-svg-1" x="0" y="0" fill="red" transform="translate(100 100) scale(0.5 0.5) translate(-100 -100)"/>
<use href="#target-svg-1" x="0" y="0" fill="yellow" transform="translate(100 100) scale(0.25 0.25) translate(-100 -100)"/>
</svg>
</svg>
<figcaption>Figure 3-1. Nested <code><svg></code> has the same size as the outermost <code><svg></code>.</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-2a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-2a" x="0" y="0" fill="black"/>
<use href="#target-svg-2a" x="0" y="0" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-svg-2a" x="0" y="-50" fill="red" transform="translate(100 50) scale(0.5 0.5) translate(-100 -50)"/>
<use href="#target-svg-2a" x="0" y="-50" fill="yellow" transform="translate(100 50) scale(0.25 0.25) translate(-100 -50)"/>
</svg>
</svg>
<figcaption>
Figure 3-2a. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.
Transformed <code><svg></code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-2b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-2b" x="0" y="0" fill="black"/>
<use href="#target-svg-2b" x="0" y="0" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="0" y="50" width="200" height="100" viewBox="0 0 200 100">
<use href="#target-svg-2b" x="0" y="0" fill="red" transform="translate(100 0) scale(0.5 0.5) translate(-100 0)"/>
<use href="#target-svg-2b" x="0" y="0" fill="yellow" transform="translate(100 33.33333) scale(0.25 0.25) translate(-100 -33.33333)"/>
</svg>
</svg>
<figcaption>
Figure 3-2b. Nested <code><svg></code> is centered in the outermost <code><svg></code> along single axis.
<code>transform-origin</code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-3a" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-3a" fill="black"/>
<use href="#target-svg-3a" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-svg-3a" x="-50" y="-50" fill="red" transform="translate(50 50) scale(0.5 0.5) translate(-50 -50)"/>
<use href="#target-svg-3a" x="-50" y="-50" fill="yellow" transform="translate(50 50) scale(0.25 0.25) translate(-50 -50)"/>
</svg>
</svg>
<figcaption>
Figure 3-3a. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.
Transformed <code><svg></code> is shifted.
</figcaption>
</figure>
<figure>
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<svg id="target-svg-3b" width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="none">
<circle cx="100" cy="100" r="100" stroke="none"/>
<line x1="100" y1="0" x2="100" y2="200" stroke="rebeccapurple" stroke-width="2"/>
<line x1="0" y1="100" x2="200" y2="100" stroke="rebeccapurple" stroke-width="2"/>
</svg>
</defs>
<use href="#target-svg-3b" fill="black"/>
<use href="#target-svg-3b" fill="blue" transform="translate(100 100) scale(0.75 0.75) translate(-100 -100)"/>
<svg x="50" y="50" width="100" height="100" viewBox="0 0 100 100">
<use href="#target-svg-3b" x="0" y="0" fill="red" transform="scale(0.5 0.5)"/>
<use href="#target-svg-3b" x="0" y="0" fill="yellow" transform="translate(33.333333 33.333333) scale(0.25 0.25) translate(-33.333333 -33.333333)"/>
</svg>
</svg>
<figcaption>
Figure 3-3b. Nested <code><svg></code> is centered in the outermost <code><svg></code> along both axes.
<code>transform-origin</code> is shifted.
</figcaption>
</figure>
According to https://developer.mozilla.org/de/docs/Web/CSS/transform-origin the problem here is that the transform-origin attribute or the transform-origin CSS style in Safari is only applied to the transform style, not the attribute.
So if you change:
<use href="#target-g-1" fill="blue" transform="scale(0.75 0.75)" transform-origin="100 100"/>
to look like this:
<use href="#target-g-1" fill="blue" style="transform: scale(0.75, 0.75);" transform-origin="100 100"/>
or even this:
<use href="#target-g-1" fill="blue" style="transform: scale(0.75, 0.75);transform-origin:100px 100px"/>
it would work in all browsers.
When I try to embed an svg within another svg, the height and width of the embedded svg is not respected by the browser and it just defaults to the size of the painted element inside of the svg. This is a problem as I wish to show the effect of a change to the view box attribute on the embedded svg and will hence need some space around the actual element painted into the svg. Is there a way to force the browser to respect the embedded svg's height and width attributes
Example code
<div id='main'>
<svg id="svg-container" width="1200" height="600" >
<defs>
<marker id="1" refX="5" refY="5" markerUnits="markerWidth" markerWidth="10" markerHeight="10">
<circle cx="5" cy="5" r="2" fill="rgb(255,0,0)"></circle>
</marker>
</defs>
<line x1="0" y1="200" x2="100%" y2="200" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="0" y1="400" x2="100%" y2="400" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="200" y1="0" x2="200" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="400" y1="0" x2="400" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="600" y1="0" x2="600" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="800" y1="0" x2="800" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<line x1="1000" y1="0" x2="1000" y2="100%" stroke='white' stroke-width="2" stroke-dasharray='5,5'/>
<svg x='0' y="0" id="svg-1" width="200" height="200">
<circle cx="100" cy="100" r="50" fill="red" stroke="yellow" stroke-width="5" ></circle>
</svg>
<svg x='200' y="0" id="svg-2" width="200" height="200">
<rect x="50" y="50" width="100" height="100" fill="blue" stroke="#27f902" stroke-width="2" ></circle>
</svg>
<svg x='400' y="0" id="svg-2" width="200" height="200">
<rect x="50" y="50" rx="50" ry="20" width="100" height="100" fill="rgb(201, 52, 235)" stroke="blue" stroke-width="2" ></circle>
</svg>
</svg>
</div>
I am drawing something here as you can see.
But there is a problem: the lines at the very top and very bottom of the image (the black "ruler") are only half the width because the "base" of the line is in the center.
For a text field, I was able to reposition the dominant-baseline and thus position my texts perfectly. However, a line (or path) doesn't seem to have a baseline.
How can I make sure my lines are at the very top and very bottom? Is the only way to do this to hard position them at the line width / 2? I tested this out, and it works perfectly, however, I'm not the biggest fan of hard coding these numbers. Is there a way not to hard code this?
Here's my code and my example image:
<svg width="200" height="200">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 0, 255);"/>
<stop offset="50%" style="stop-color:rgb(255, 255, 255);"/>
<stop offset="100%" style="stop-color:rgb(255, 127, 0);"/>
</linearGradient>
</defs>
<rect width="20%" height="100%" fill="url(#gradient)" />
<line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="0" y2="0" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="100%" y2="100%" style="stroke: black;"/>
<text x="25%" y="0%" dominant-baseline="hanging">Top text</text>
<text x="25%" y="50%" dominant-baseline="middle">
<tspan x="25%" dy="-3%">middle text 1</tspan>
<tspan x="25%" dy="6%">middle text 2</tspan>
</text>
<text x="25%" y="100%">bottom text</text>
</svg>
Here's a Fiddle if you want to try it out. Just zoom in really far.
https://jsfiddle.net/jkom2x8f/1/
Your solution is the correct solution. It is the only real solution. There is nothing wrong with it.
It seems that after a lot of searching around and reading the comments, I concluded that hard coding the y positions to 0.5 and 199.5 is the only way to do it:
<svg width="200" height="200">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0, 0, 255);"/>
<stop offset="50%" style="stop-color:rgb(255, 255, 255);"/>
<stop offset="100%" style="stop-color:rgb(255, 127, 0);"/>
</linearGradient>
</defs>
<rect width="20%" height="100%" fill="url(#gradient)" />
<line x1="22%" x2="22%" y1="0%" y2="100%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="0.5" y2="0.5" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="50%" y2="50%" style="stroke: black;"/>
<line x1="22%" x2="24.5%" y1="199.5" y2="199.5" style="stroke: black;"/>
<text x="25%" y="0%" dominant-baseline="hanging">Top text</text>
<text x="25%" y="50%" dominant-baseline="middle">
<tspan x="25%" dy="-3%">middle text 1</tspan>
<tspan x="25%" dy="6%">middle text 2</tspan>
</text>
<text x="25%" y="100%">bottom text</text>
</svg>
Here's a fiddle:
https://jsfiddle.net/jkom2x8f/5/
I am drawing dynamically a graphic that contains 4 pyramids and a legend. I am trying to use preserveAspectRatio = xMidYMid to centralize it on the page but it doesn't work. I have tryied everything!
Someone could help to fix that?
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1400 1000"
xml:space="preserve">
<defs id="def">
<linearGradient id="d00" x1="0" x2="300" y1="350" y2="350" spreadMethod="pad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#58fd58"></stop>
<stop offset="1" stop-color="#bcfebc"></stop>
</linearGradient>
<linearGradient id="d01" x1="50.526895979504275" x2="249.47310402049573" y1="232.1039093811567" y2="232.1039093811567"
spreadMethod="pad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#9f6de2"></stop>
<stop offset="1" stop-color="#d9c5f3"></stop>
</linearGradient>
<linearGradient id="d02" x1="87.86675921993769" x2="212.1332407800623" y1="144.9775618201454" y2="144.9775618201454"
spreadMethod="pad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#43b5cb"></stop>
<stop offset="1" stop-color="#b4e1ea"></stop>
</linearGradient>
</defs>
<g id="legend">
<rect id="r0" x="0" y="380" width="10" height="10" fill="#58fd58" stroke="#c0c0c0"></rect>
<text id="h0" x="15" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Master</text>
<rect id="r1" x="72.3125" y="380" width="10" height="10" fill="#9f6de2" stroke="#c0c0c0"></rect>
<text id="h1" x="87.3125" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Sênior</text>
<rect id="r2" x="140.65625" y="380" width="10" height="10" fill="#43b5cb" stroke="#c0c0c0"></rect>
<text id="h2" x="155.65625" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Especialista</text>
<rect id="r3" x="239.671875" y="380" width="10" height="10" fill="#ae9ff7" stroke="#c0c0c0"></rect>
<text id="h3" x="254.671875" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Trainee</text>
<rect id="r4" x="314.6875" y="380" width="10" height="10" fill="#48a68b" stroke="#c0c0c0"></rect>
<text id="h4" x="329.6875" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Pleno</text>
<rect id="r5" x="377.625" y="380" width="10" height="10" fill="#1ceb8f" stroke="#c0c0c0"></rect>
<text id="h5" x="392.625" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Júnior</text>
</g>
<g id="g0">
<path id="b00" stroke-linecap="butt" d="M2.33,345.17 L50.526895979504275,232.1039093811567 L249.47310402049573,232.1039093811567 L297.67,345.17 Z"
fill="url(#d00)"></path>
<text id="t00" x="277.73655201024786" y="289.22195469057834" transform="rotate(-30 277.73655201024786 289.22195469057834)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">33.68%</text>
<path id="b01" stroke-linecap="butt" d="M52.85689597950427,227.2739093811567 L87.86675921993769,144.9775618201454 L212.1332407800623,144.9775618201454 L247.1431040204957,227.2739093811567 Z"
fill="url(#d01)"></path>
<text id="t01" x="233.80317240027904" y="186.71073560065102" transform="rotate(-30 233.80317240027904 186.71073560065102)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">24.89%</text>
<path id="b02" stroke-linecap="butt" d="M90.19675921993769,140.1475618201454 L111.26041362796529,90.39236820141434 L188.7395863720347,90.39236820141434 L209.80324078006228,140.1475618201454 Z"
fill="url(#d02)"></path>
<text id="t02" x="203.4364135760485" y="115.85496501077988" transform="rotate(-30 203.4364135760485 115.85496501077988)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">15.60%</text>
<path id="b03" stroke-linecap="butt" d="M113.59041362796529,85.56236820141434 L127.04032161180082,53.57258290579813 L172.95967838819917,53.57258290579813 L186.40958637203468,85.56236820141434 Z"
fill="url(#d03)"></path>
<text id="t03" x="183.84963238011696" y="70.15247555360627" transform="rotate(-30 183.84963238011696 70.15247555360627)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">10.52%</text>
<path id="b04" stroke-linecap="butt" d="M129.37032161180082,48.74258290579813 L139.7985185672931,23.80345667631616 L160.2014814327069,23.80345667631616 L170.62967838819915,48.74258290579813 Z"
fill="url(#d04)"></path>
<text id="t04" x="169.58057991045303" y="36.85801979105712" transform="rotate(-30 169.58057991045303 36.85801979105712)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">8.51%</text>
<path id="b05" stroke-linecap="butt" d="M142.1285185672931,18.97345667631616 L150,5.684341886080802e-14 L150,5.684341886080802e-14 L157.8714814327069,18.97345667631616 Z"
fill="url(#d05)"></path>
<text id="t05" x="158.10074071635344" y="10.07172833815808" transform="rotate(-30 158.10074071635344 10.07172833815808)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">6.80%</text>
</g>
</svg>
EDIT: code was edited to better visualization.
EDIT2: fixed spelling error on property.
EDIT3: I've managed to fix this problem by using transform = "translate(x, y)" property after inserting the object on the svg. For that I've calculated the average width and height positions of my viewBox and set as x and y parameters.
For preserveAspectRatio to work correctly, the viewBox needs to accurately describe the bounds of the content in the SVG. You current bounding box of 1400x1000 is way too big.
If we drop it down to something more correct, you will find things work better.
See below:
svg {
width: 100%;
height: 300px;
border: solid 1px red;
}
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 -20 440 420"
xml:space="preserve">
<defs id="def">
<linearGradient id="d00" x1="0" x2="300" y1="350" y2="350" spreadMethod="pad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#58fd58"></stop>
<stop offset="1" stop-color="#bcfebc"></stop>
</linearGradient>
<linearGradient id="d01" x1="50.526895979504275" x2="249.47310402049573" y1="232.1039093811567" y2="232.1039093811567"
spreadMethod="pad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#9f6de2"></stop>
<stop offset="1" stop-color="#d9c5f3"></stop>
</linearGradient>
<linearGradient id="d02" x1="87.86675921993769" x2="212.1332407800623" y1="144.9775618201454" y2="144.9775618201454"
spreadMethod="pad" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#43b5cb"></stop>
<stop offset="1" stop-color="#b4e1ea"></stop>
</linearGradient>
</defs>
<g id="legend">
<rect id="r0" x="0" y="380" width="10" height="10" fill="#58fd58" stroke="#c0c0c0"></rect>
<text id="h0" x="15" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Master</text>
<rect id="r1" x="72.3125" y="380" width="10" height="10" fill="#9f6de2" stroke="#c0c0c0"></rect>
<text id="h1" x="87.3125" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Sênior</text>
<rect id="r2" x="140.65625" y="380" width="10" height="10" fill="#43b5cb" stroke="#c0c0c0"></rect>
<text id="h2" x="155.65625" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Especialista</text>
<rect id="r3" x="239.671875" y="380" width="10" height="10" fill="#ae9ff7" stroke="#c0c0c0"></rect>
<text id="h3" x="254.671875" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Trainee</text>
<rect id="r4" x="314.6875" y="380" width="10" height="10" fill="#48a68b" stroke="#c0c0c0"></rect>
<text id="h4" x="329.6875" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Pleno</text>
<rect id="r5" x="377.625" y="380" width="10" height="10" fill="#1ceb8f" stroke="#c0c0c0"></rect>
<text id="h5" x="392.625" y="390" style="font-family:'Georgia';font-size:13px;" fill="#000000">Júnior</text>
</g>
<g id="g0">
<path id="b00" stroke-linecap="butt" d="M2.33,345.17 L50.526895979504275,232.1039093811567 L249.47310402049573,232.1039093811567 L297.67,345.17 Z"
fill="url(#d00)"></path>
<text id="t00" x="277.73655201024786" y="289.22195469057834" transform="rotate(-30 277.73655201024786 289.22195469057834)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">33.68%</text>
<path id="b01" stroke-linecap="butt" d="M52.85689597950427,227.2739093811567 L87.86675921993769,144.9775618201454 L212.1332407800623,144.9775618201454 L247.1431040204957,227.2739093811567 Z"
fill="url(#d01)"></path>
<text id="t01" x="233.80317240027904" y="186.71073560065102" transform="rotate(-30 233.80317240027904 186.71073560065102)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">24.89%</text>
<path id="b02" stroke-linecap="butt" d="M90.19675921993769,140.1475618201454 L111.26041362796529,90.39236820141434 L188.7395863720347,90.39236820141434 L209.80324078006228,140.1475618201454 Z"
fill="url(#d02)"></path>
<text id="t02" x="203.4364135760485" y="115.85496501077988" transform="rotate(-30 203.4364135760485 115.85496501077988)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">15.60%</text>
<path id="b03" stroke-linecap="butt" d="M113.59041362796529,85.56236820141434 L127.04032161180082,53.57258290579813 L172.95967838819917,53.57258290579813 L186.40958637203468,85.56236820141434 Z"
fill="url(#d03)"></path>
<text id="t03" x="183.84963238011696" y="70.15247555360627" transform="rotate(-30 183.84963238011696 70.15247555360627)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">10.52%</text>
<path id="b04" stroke-linecap="butt" d="M129.37032161180082,48.74258290579813 L139.7985185672931,23.80345667631616 L160.2014814327069,23.80345667631616 L170.62967838819915,48.74258290579813 Z"
fill="url(#d04)"></path>
<text id="t04" x="169.58057991045303" y="36.85801979105712" transform="rotate(-30 169.58057991045303 36.85801979105712)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">8.51%</text>
<path id="b05" stroke-linecap="butt" d="M142.1285185672931,18.97345667631616 L150,5.684341886080802e-14 L150,5.684341886080802e-14 L157.8714814327069,18.97345667631616 Z"
fill="url(#d05)"></path>
<text id="t05" x="158.10074071635344" y="10.07172833815808" transform="rotate(-30 158.10074071635344 10.07172833815808)"
style="font-family:'Georgia';font-size:13px;" fill="#000000">6.80%</text>
</g>
</svg>
I'm trying to program a graph like this one:
I tried with SVG, but it's not very good since I had to use 2 different rectangles and didn't manage to get only the 4 edges to be rounded.
Here's my code:
<svg width="400" height="250">
<defs>
<linearGradient id="solids" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
</linearGradient>
<linearGradient id="solids2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="50%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
</linearGradient>
</defs>
<text x="135" y="12" style="fill:black;">Conservadorismo
<tspan x="150" y="240">Liberalismo</tspan>
<tspan x="20" y="125">Esquerda</tspan>
<tspan x="305" y="125">Direita</tspan>
</text>
<rect x="100" y="20" rx="20" ry="20" width="200" height="100" style="fill:url(#solids); opacity:0.76" />
<rect x="100" y="120" rx="20" ry="20" width="200" height="100" style="fill:url(#solids2); opacity:0.76" />
<line x1="100" y1="120" x2="300" y2="120" style="stroke:black;stroke-width:2" />
<line x1="200" y1="20" x2="200" y2="220" style="stroke:black;stroke-width:2" />
</svg>
What should I do to fix it or do it better?
I would use ordinary <rect> objects without rounded corners, and apply a clipPath to the whole drawing to round off the corners.
Here's a simple example:
<svg width="400" height="400" viewBox="0 0 400 400">
<defs>
<clipPath id="roundRect">
<rect x="10" y="10" rx="20" ry="20" width="380" height="380"/>
</clipPath>
</defs>
<g clip-path="url(#roundRect)">
<rect fill="#0a0" stroke="none" x="10" y="10" width="190" height="190"/>
<rect fill="#f00" stroke="none" x="200" y="10" width="190" height="190"/>
<rect fill="#0bf" stroke="none" x="10" y="200" width="190" height="190"/>
<rect fill="#fd0" stroke="none" x="200" y="200" width="190" height="190"/>
</g>
</svg>