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>
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'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>
I have this CODEPEN and here are my issues:
I am not understanding why the gradient I applied and referenced as my mask fill like so, doesn't render as it should. It should go from fully opaque to fully transparent. For the gradient I am using: http://angrytools.com/gradient/?0_800080,100_450045&0_0,100_100&l_180:
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#grad1)" />
</mask>
In addition I don't understand why if I remove the fill="blue" attribute from my use element like so:
<use xlink:href="#myText" mask="url(#myMask)" />
The text appears black as if no gradient was applied. The gradient I defined is purple..
Thanks!
if you just want to apply your gradient to your text, there is no need to use masks, because gradients support the stop-opacity property.
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0%" style="stop-color:rgb(128,0,128);stop-opacity:0" />
<stop offset="100%" style="stop-color:rgb(69,0,69);stop-opacity:1" />
</linearGradient>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<use xlink:href="#myText" fill="url(#lgrad)" />
</svg>
you only need masks if you want to seperate the opacity from your fills:
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<linearGradient id="lgrad" x1="100%" y1="50%" x2="0%" y2="50%">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</linearGradient>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="url(#lgrad)" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<g mask="url(#myMask)">
<use xlink:href=" #myText" transform="translate(0,-50) " fill="red " />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>
masks turn colors into opacity information. going from black(totally transparent) to white (totally opaque)
<svg xmlns="http://www.w3.org/2000/svg" width="200px" height="200px">
<defs>
<mask id="myMask" x="0" y="0" width="100%" height="100%">
<rect x="0" y="0" width="50%" height="50%" fill="white" />
<rect x="50%" y="0" width="50%" height="50%" fill="#333" />
<rect x="0%" y="50%" width="50%" height="50%" fill="#aaa" />
<rect x="50%" y="50%" width="50%" height="50%" fill="white" />
<circle cx="50%" cy="50%" r="15%" fill="black" />
</mask>
<text x="100" y="120" text-anchor="middle" id="myText" font-size="50">Hello</text>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="beige" />
<g mask="url(#myMask)">
<use xlink:href="#myText" transform="translate(0,-50)" fill="red" />
<use xlink:href="#myText" transform="translate(0,0)" fill="green" />
<use xlink:href="#myText" transform="translate(0,50)" fill="blue" />
</g>
</svg>
Have a code:
<svg id="view-svg-problem" xmlns="http://www.w3.org/2000/svg">
<defs>
<marker id='svg-marker-start' orient='auto' markerUnits="strokeWidth" markerWidth='10' markerHeight='10' refX='9' refY='5' class="svg-path-dec">
<rect x="1" y="1" width="8" height="8" />
<text x="3" y="7.1" font-weight="bold" font-family="Arial" font-size="5.5" fill="white" stroke="transparent">S</text>
</marker>
<marker id='svg-marker-end' orient='auto' markerUnits="strokeWidth" markerWidth='10' markerHeight='10' refX='5' refY='9' class="svg-path-dec">
<rect x="1" y="1" width="8" height="8" />
<text x="3" y="7.1" font-weight="bold" font-family="Arial" font-size="5.5" fill="white" stroke="transparent">F</text>
</marker>
</defs>
<path id="view-path-svg" class="svg-path" marker-start="url(#svg-marker-start)" marker-end="url(#svg-marker-end)" d="M 655,343 Q747,317 705.5,311 Q664,305 708,292 Q752,279 713.5,254 Q675,229 711.5,212.5 Q748,196 706.5,189 Q665,182 687,157.5 Q709,133 679.5,126.5 Q650,120 663,106 T676,92"></path>
</svg>
So result looks like on the picture:
Easy to see that marker-start aligns well with the path, but marker-end doesn't want to. Is there a solution to the problem?