I am working with a svg element as follows and I am using css to control the font-size of the svg text.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" text-anchor="middle" transform="matrix(1 0 0 1 12.3462 0)">60%</text>
</g>
</g>
</g>
</g>
</svg>
However, when I increase the font-size, e.g.
.tick>text{
font-size: xx-large;
}
it changes to this
Is there anyway I can have the font-size increased, yet the text would be aligned to the green line? like below
As an alternative, I tried following
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif" text-anchor="end">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" transform="matrix(1 0 0 1 13.1462 0)" text-anchor="middle">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="-3" dy="0.32em" text-anchor="middle" transform="matrix(1 0 0 1 12.3462 0)">60%</text>
</g>
</g>
</g>
</g>
</svg>
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
but it is not applying the scaling from the desired origin.
Try positioning your test at x="0" instead of x="-3".
Also remove the transform and test-anchor="middle/end" attributes.
.tick>text{
transform-origin: left;
transform-box: fill-box;
transform: scaleY(2.5);
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 720">
<rect class="vBoxRect" width="1280" height="720" fill="none" stroke="red"></rect>
<rect class="boundRect" x="70" y="70" width="1160" height="600" fill="none" stroke="green"></rect>
<g class="bound" style="transform: translate(70px, 70px);">
<g class="yAxis">
<g class="yAxisLeft" fill="none" font-size="10" font-family="sans-serif">
<g class="tick" opacity="1" transform="translate(0,411.7647058823529)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">20%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,223.52941176470583)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">40%</text>
</g>
<g class="tick" opacity="1" transform="translate(0,35.29411764705883)">
<line stroke="currentColor" x2="1160"></line>
<text fill="currentColor" x="0" dy="0.32em">60%</text>
</g>
</g>
</g>
</g>
</svg>
How can i animated fill up a path element with color in a SVG ? In the lower area I added a rect element, that worked fine. But how can i fill up the rest (the head) ?
The SVG looks like this
And here is my SVG code
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 110.6 225.5" style="enable-background:new 0 0 110.6 225.5" xml:space="preserve">
<style type="text/css">
.st2{
fill:#FEC400;
}
}
</style>
<g>
<g>
<g>
<!-- mouth -->
<path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
</g>
<g>
<!-- eye -->
<circle cx="78.3" cy="60.5" r="6.5"/>
</g>
<g>
<!-- eye -->
<circle cx="38.2" cy="60.5" r="6.5"/>
</g>
<g>
<!-- lower -->
<rect class="st2" x="5" y="220" width="24" height="90">
<animate attributeName="y" values="220 ; 100" dur="2.5s"/>
<animate attributeName="height" values="90 ; 120" dur="2.5s"/>
</rect>
</g>
<g>
<!-- figure, needs to fill up with color -->
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
</g>
</g>
</g>
</svg>
It works with a mask:
<svg width="200" height="190">
<g transform="translate(0,-35)">
<mask id="shape-mask">
<rect x="0" y="0" width="200" height="230" fill="black" />
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z" fill="white" />
</mask>
<rect y="230" width="200" height="0" fill="orange" mask="url(#shape-mask)">
<animate attributeName="y" values="230 ; 0" dur="2.5s"/>
<animate attributeName="height" values="0 ; 230" dur="2.5s"/>
</rect>
<path d="M56.9,94c-4.7,0-9.3-1.3-13.4-3.7c-3.8-2.2-6.9-5.4-9.2-9.1c-0.9-1.5-0.4-3.5,1.1-4.4s3.5-0.4,4.4,1.1
c1.7,2.8,4.1,5.2,7,6.9c4.6,2.7,10,3.5,15.2,2.2s9.6-4.6,12.3-9.2c0.9-1.5,2.9-2,4.4-1.1s2,2.9,1.1,4.4
c-3.6,6.1-9.4,10.4-16.2,12.2C61.3,93.7,59.1,94,56.9,94z"/>
<circle cx="78.3" cy="60.5" r="6.5"/>
<circle cx="38.2" cy="60.5" r="6.5"/>
<path d="M26.9,225.5H3.2c-1.8,0-3.2-1.4-3.2-3.2v-146c-0.1-19.2,21.4-36.8,50-40.9c14.4-2.1,28.6-0.4,39.8,4.7
c11.7,5.4,19,13.8,20.4,23.8l0,0c3,21.2-11.1,37.6-37.9,43.9c-13.6,3.2-30.9,1.1-42.3-3v117.3C30.1,224.1,28.6,225.5,26.9,225.5z
M6.4,219.1h17.3V100.2c0-1.1,0.6-2.1,1.5-2.7s2.1-0.6,3.1-0.2c9.6,4.7,28.6,7.7,42.6,4.4c23.2-5.5,35.6-19.3,33-36.8
c-1.1-7.8-7.1-14.5-16.7-18.9c-10.1-4.6-23-6.1-36.3-4.2c-25,3.6-44.6,18.8-44.5,34.5C6.4,76.3,6.4,219.1,6.4,219.1z"/>
</g>
</svg>
I am creating an ellipse in svg. In this ellipse I am trying to give a shape like a star or cross. I can not use anything else other than ellipse. This is what I have done so far.
<ellipse cx="96" cy="126" rx="5" ry="5" fill="#EF4444" stroke="#EF4444" stroke-width="19" stroke-dasharray="4" opacity="1" transform="translate(139 50)"></ellipse>
All I did is, added the stroke-dasharray="4" and it became like a cross. But it is not proper yet. Can anyone help me on this please.
This is how it looks like now. Which is not a star or a cross.
I am not entirely sure what you mean by
I can not use anything else other than ellipse
If you strictly follow that restriction, then your request would seem close to impossible.
Your first attempt is a nice idea, but unfortunately it may have issues. Creating circles or ellipses with stroke widths that are greater than the radius (technically, more than double the radius), can not always be trusted to render correctly.
The approach that Robert suggested is better and more flexible, but will require the use of SVG elements other than <ellipse>
For example take the following design.
svg {
width: 400px;
}
<svg viewBox="0 0 100 70">
<ellipse cx="50" cy="35" rx="40" ry="28"
fill="none" stroke="black" stroke-width="1"/>
<g class="cross">
<rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
<rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
</g>
</svg>
If we turn the ellipse into a clip path, and apply it to the cross, we get this:
svg {
width: 400px;
}
<svg viewBox="0 0 100 70">
<defs>
<clipPath id="oval">
<ellipse cx="50" cy="35" rx="40" ry="28"/>
</clipPath>
</defs>
<g class="cross" clip-path="url(#oval)">
<rect x="0" y="20" width="100" height="30" transform="rotate(35, 50,35)"/>
<rect x="0" y="20" width="100" height="30" transform="rotate(-35, 50,35)"/>
</g>
</svg>
You can make the cross part look however you like, and still clip it with the ellipse.
Another idea. Cut a cross from a circle using four ellipses
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="400" height="400" viewBox="0 0 400 400" >
<circle cx="200" cy="200" r="100" fill="crimson" />
<circle cx="200" cy="200" r="40" fill="none" stroke="black" />
<circle cx="200" cy="200" r="2" fill="black" />
<polyline fill="none" stroke="black" points="0,0 400,400" />
<polyline fill="none" stroke="black" points="0,400 400,0" />
<ellipse transform="rotate(45 100 125)" cx="80" cy="107" rx="102" ry="50" fill="gold" opacity="0.5" />
<ellipse transform="translate(125 -20) rotate(135 100 125)" cx="45" cy="80" rx="100" ry="50" fill="gold" opacity="0.5" />
<ellipse transform="translate(125 -20) rotate(225 100 125)" cx="-90" cy="40" rx="100" ry="50" fill="gold" opacity="0.5" />
<ellipse transform="translate(125 -20) rotate(315 100 125)" cx="-125" cy="175" rx="100" ry="50" fill="gold" opacity="0.5" />
</svg>
Then you can use these ellipses as a mask.
.container {
width:75vw;
height:auto;
}
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 50 400 400" preserveAspectRatio="xMinYMin meet">
<defs>
<mask id="msk">
<rect width="100%" height="100%" fill="white" />
<g id="group" fill="black">
<ellipse transform="rotate(45 100 125)" cx="80" cy="107" rx="102" ry="50" />
<ellipse transform="translate(125 -20) rotate(135 100 125)" cx="45" cy="80" rx="100" ry="50" />
<ellipse transform="translate(125 -20) rotate(225 100 125)" cx="-90" cy="40" rx="100" ry="50" />
<ellipse transform="translate(125 -20) rotate(315 100 125)" cx="-125" cy="175" rx="100" ry="50" />
</g>
</mask>
</defs>
<image href="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fc/Foro_Romano.jpg/1200px-Foro_Romano.jpg "
width="100%" height="100%" />
<circle mask="url(#msk)" cx="200" cy="200" r="100" fill="crimson" opacity="0.7" />
</svg>
</div>
I'm studying SVG files (beginning) but I can't make my SVG appear when I set <defs> tag!
I mean.. If I call the SVG directly it works properly.
Like this:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
xml:space="preserve">
<g>
<rect class="bosta1" y="55.406" fill="#E8CF1E" stroke="#000000" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect class="bosta2" x="62.162" fill="#E42326" stroke="#000000" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</svg>
Fiddle: https://jsfiddle.net/sz0bkbdm/
But if I try to use refs I can't make the rects visible.
Like this:
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
xml:space="preserve">
<defs>
<g>
<rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</defs>
</svg>
MY CONTENT
<svg>
<use xlink:href="#mySvg"></use>
</svg>
Fiddle: https://jsfiddle.net/g1hdLy82/
You problem is here please follow this code
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg">
<defs>
<g>
<rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</defs>
</svg>
MY CONTENT
<svg >
<use xlink:href="#ret1"></use>
<use xlink:href="#ret2"></use>
</svg>
or
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="rec1">
<rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</defs>
</svg>
MY CONTENT
<svg >
<use xlink:href="#rec1"></use>
</svg>
I guess you are exchanging <refs> with <defs>, since i have never heard of a <refs> tag before.
UPDATE
remove the wrong refs/defs, than it works!
fiddle
UPDATE #2
Well ok, than like so:
<svg>
<defs>
<g id="toshow">
<rect class="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect class="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</g>
</defs>
</svg>
<svg>
<use xlink:href="#toshow"></use>
</svg>
FIDDLE
UDDATE #3
Probably helpful.
You can try this:
<svg version="1.1" id="mySvg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="163.514px" height="263.514px" viewBox="0 0 163.514 263.514" enable-background="new 0 0 163.514 263.514"
xml:space="preserve">
<defs>
<rect id="ret1" y="55.406" stroke-miterlimit="10" width="163.514" height="137.838"/>
<rect id="ret2" x="62.162" stroke-miterlimit="10" width="44.811" height="263.514"/>
</defs>
</svg>
MY CONTENT
<svg>
<use xlink:href="#ret1"></use>
<use xlink:href="#ret2"></use>
</svg>
and the css is:
#mySvg { width:100px; height:auto; }
#ret1 { fill:green; stroke:red; }
#ret2 { fill:blue; stroke:white; }
Instead of doing the following:
<html>
<body>
<embed src="circle.svg" type="image/svg+xml" />
<embed src="square.svg" type="image/svg+xml" />
<embed src="triangle.svg" type="image/svg+xml" />
</body>
</html>
I would prever to do something like this
<html>
<body>
<embed src="shapes.svg" type="image/svg+xml" id="circle" />
<embed src="shapes.svg" type="image/svg+xml" id="square" />
<embed src="shapes.svg" type="image/svg+xml" id="triangle" />
</body>
</html>
with a svg file that may look something like this
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" >
<svg id="circle">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
<svg id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
<svg id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</svg>
It seems as an SVG is just XML I should be able to store all my images in a single file that downloades a single time and is used throughout the site.
You can only have a single root node in an html document. Nevertheless there are various ways to achieve what you want.
One way is SVG Stacks which works by having all the drawings on top of each other and then just displaying the one you want to see using CSS.
Another way might be to have a shapes.svg like this with all the drawings in different places
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(0,0)">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</g>
<g transform="translate(0,200)">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</g>
<g transform="translate(0,400)">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</g>
</svg>
And then use svgView to show just the bits you want.
<html>
<body>
<embed src="shapes.svg#svgView(viewBox(50,0,100,100))" style="width:100px; height:100px" type="image/svg+xml" />
<embed src="shapes.svg#svgView(viewBox(0,200,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
<embed src="shapes.svg#svgView(viewBox(0,400,100,100))" style="width:100px;height:100px" type="image/svg+xml"/>
</body>
</html>
All of these do mean though that you use more memory in the UA as the whole svg file is loaded 3 times and you just see a part of it each time.
Yes, but XML documents need a single root node. Yours has three. Try wrapping the three nodes in an svg element and move the namespace and version number to it. Seems to validate via http://validator.w3.org/check
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<svg id="circle">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red" />
</svg>
<svg id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>
<svg id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
</svg>
Reference:
<svg alt="">
<use xlink:href="shapes.svg#circle"></use>
</svg>
<svg alt="">
<use xlink:href="shapes.svg#square"></use>
</svg>
<svg alt="">
<use xlink:href="shapes.svg#triangle"></use>
</svg>
shapes.svg:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="circle">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</symbol>
<symbol id="square">
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</symbol>
<symbol id="triangle">
<line x1="50" y1="0" x2="0" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="50" y1="0" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
<line x1="0" y1="50" x2="100" y2="50" style="stroke:rgb(255,0,0);stroke-width:2" />
</symbol>
</svg>