I need create seats map.
I create svg with seats.
<div class="seats-map">
<svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 1000 300">
<g data-row="1.0"><circle cx="100" cy="100" r="20" fill="red"></circle><circle cx="150" cy="100" r="20" fill="red"></circle><circle cx="200" cy="100" r="20" fill="red"></circle><circle cx="250" cy="100" r="20" fill="red"></circle><circle cx="300" cy="100" r="20" fill="red"></circle></g><g data-row="2.0"><circle cx="100" cy="150" r="20" fill="red"></circle><circle cx="150" cy="150" r="20" fill="red"></circle><circle cx="200" cy="150" r="20" fill="red"></circle><circle cx="250" cy="150" r="20" fill="red"></circle><circle cx="300" cy="150" r="20" fill="red"></circle></g><g data-row="3.0"><circle cx="100" cy="200" r="20" fill="red"></circle><circle cx="150" cy="200" r="20" fill="red"></circle><circle cx="200" cy="200" r="20" fill="red"></circle><circle cx="250" cy="200" r="20" fill="red"></circle><circle cx="300" cy="200" r="20" fill="red"></circle></g></svg>
Class "seats-map" has 1000px width and 400px height.
I need to display svg in the center. And it should fit in these dimensions proportionally. Then I will add a zoom effect.
You need to add CSS code to scale. like:
.seats-map:hover {
transform: scale(2);
transition: transform 0.5s;
}
.seats-map {
transform: scale(1);
transition: transform 0.5s;
margin: auto;
width: 200px;
padding-right: -200dp;
}
<!DOCTYPE HTML>
<html>
<body>
<div class="seats-map">
<svg xmlns="https://www.w3.org/2000/svg" id="seats-map-svg" viewBox="0 0 400 300">
<g data-row="1.0"><circle cx="100" cy="100" r="20" fill="red"></circle><circle cx="150" cy="100" r="20" fill="red"></circle><circle cx="200" cy="100" r="20" fill="red"></circle><circle cx="250" cy="100" r="20" fill="red"></circle><circle cx="300" cy="100" r="20" fill="red"></circle></g><g data-row="2.0"><circle cx="100" cy="150" r="20" fill="red"></circle><circle cx="150" cy="150" r="20" fill="red"></circle><circle cx="200" cy="150" r="20" fill="red"></circle><circle cx="250" cy="150" r="20" fill="red"></circle><circle cx="300" cy="150" r="20" fill="red"></circle></g><g data-row="3.0"><circle cx="100" cy="200" r="20" fill="red"></circle><circle cx="150" cy="200" r="20" fill="red"></circle><circle cx="200" cy="200" r="20" fill="red"></circle><circle cx="250" cy="200" r="20" fill="red"></circle><circle cx="300" cy="200" r="20" fill="red"></circle></g>
</svg>
</div>
</body>
</html>
and SVG's view box keeps width 400.
Related
I am seeking to create a pie chart in pure SVG. I do not want to use JS or CSS, which most of the solutions on this site utilize. I came across this great article that explains how to create a pie chart in pure SVG: https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart
The problem is that this article only describes how to make only one slice. I am seeking to create a pie chart that can contain up to a maximum of 360 elements (in which each slice of the pie will be 0.27% of it).
I have attempted to create another wedge in the following example by rotating it to -89 instead of the -90, but I'm not getting the results I'm looking for: https://codepen.io/HexylCinnamal/pen/KKwEjpK
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%" viewBox="0 0 20 20">
<circle r="10" cx="10" cy="10" fill="transparent"/>
<circle r="5" cx="10" cy="10" fill="transparent" stroke="tomato" stroke-width="10"
stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-90) translate(-20)"/>
<circle r="5" cx="10" cy="10" fill="transparent" stroke="blue" stroke-width="10"
stroke-dasharray="calc(1 * 31.4 / 100) 31.4" transform="rotate(-89) translate(-20)"/>
</svg>
I was wondering if there is any math I need to do to calculate the proper angle and translation to make the blue wedge appear next to the red one.
Unfortunately, calc() to calculate the attribute stroke-dasharray only works inChrome
For a cross-browser solution, it is necessary to calculate and assign values in the stroke-dasharray.
stroke-dasharray ="Circumference * 0.35, Circumference" or stroke-dasharray = "31.4 * 0.35, 31.4" or stroke-dasharray="10.99 31.4"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid gray; ">
<circle r="10" cx="10" cy="10" fill="white" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
</svg>
For two segments:
red="35%"
blue="15%" stroke-dasharray = 31.4 * 0.15, 31.4 or stroke-dasharray ="4.71, 31.4"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="10" cx="10" cy="10" fill="white" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="bisque"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4" />
</svg>
We see that the blue sector overlaps the red sector; therefore, it is necessary to shift the blue sector by an amount equal to the length of the red sector 10.99
Add to shift the blue sector stroke-dashoffset="-10.99"
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="5" cx="10" cy="10" fill="bisque" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4"
stroke-dashoffset="-10.99"
/>
</svg>
Four sectors
The solution works in all modern browsers including MS Edge
<!-- https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart -->
<svg height="20%" width="20%" viewBox="0 0 20 20" style="border:1px solid; ">
<circle r="5" cx="10" cy="10" fill="bisque" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="tomato"
stroke-width="10"
stroke-dasharray="10.99 31.4" />
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="dodgerblue"
stroke-width="10"
stroke-dasharray="4.71 31.4"
stroke-dashoffset="-10.99"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="gold"
stroke-width="10"
stroke-dasharray="9.42 31.4"
stroke-dashoffset="-15.7"
/>
<circle r="5" cx="10" cy="10" fill="transparent"
stroke="yellowgreen"
stroke-width="10"
stroke-dasharray="6.28 31.4"
stroke-dashoffset="-25.12"
/>
<text x="10" y="15" font-size="3px" fill="black" >35%</text>
<text x="1" y="14" font-size="3px" fill="black" >15%</text>
<text x="4" y="6" font-size="3px" fill="black" >30%</text>
<text x="12" y="8" font-size="3px" fill="black" >20%</text>
</svg>
One easy way to fix your problem is using a different viewBox: "-10 -10 20 20"making the point 0,0 the center of the svg canvas. Please observe that you don't need the cx and cy attributes anymore and the transformation is only rotating.
I'm supposing that you want to divide the circle in 100 parts. In this case you'll need to rotate the second circle -90 + 360/100 or -90 - 360/100 degs.
circle{stroke-dasharray:calc(31.4 / 100) 31.4;}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 20 20">
<circle r="10" fill="transparent"/>
<circle r="5" fill="transparent" stroke="tomato" stroke-width="10" transform="rotate(-90)"/>
<circle r="5" fill="transparent" stroke="blue" stroke-width="10" transform="rotate(-86.4)"/>
</svg>
I've been trying to draw this circle here's my code so far.
<div class="circle">
<svg height="360" width="380">
<circle cx="50" cy="50" r="50" fill="rgb(177,236,250"></circle>
<circle cx="100" cy="120" r="90" fill="rgb(177,236,250)" ></circle>
<circle cx="290" cy="220" r="160" fill="rgb(177,236,250)"></circle>
<circle cx="80" cy="220" r="80" fill="rgb(177,236,250)"></circle>
</svg>
</div>
but it looks so different.
You need to use rgba instead of RGB to set transparency:
<div class="circle">
<svg height="360" width="380">
<circle cx="50" cy="50" r="50" fill="rgba(177,236,250,0.5)"></circle>
<circle cx="100" cy="120" r="90" fill="rgba(177,236,250,0.5)" ></circle>
<circle cx="290" cy="220" r="160" fill="rgba(177,236,250,0.5)"></circle>
<circle cx="80" cy="220" r="80" fill="rgba(177,236,250,0.5)"></circle>
</svg>
</div>
You can use rgba for transparent colors. Also, you can use "position:relative;z-index:(order)" to determine which one will appear at the top.
<div class="circle">
<svg height="360" width="380">
<circle cx="50" cy="50" r="50" fill="rgba(177,236,250,.8)" style="position:relative;z-index:1"></circle>
<circle cx="100" cy="120" r="90" fill="rgba(177,236,250,.5)" style="position:relative;z-index:4"></circle>
<circle cx="290" cy="220" r="160" fill="rgba(177,236,250,.4)" style="position:relative;z-index:3"></circle>
<circle cx="80" cy="220" r="80" fill="rgb(177,236,250,.7)" style="position:relative;z-index:2"></circle>
</svg>
</div>
<div class="circle">
<svg height="360" width="380">
<circle cx="50" cy="50" r="50" fill="rgb(177,236,250,0.5"></circle>
<circle cx="100" cy="120" r="90" fill="rgb(177,236,250,0.7)" ></circle>
<circle cx="290" cy="220" r="160" fill="rgb(177,236,250,0.5)"></circle>
<circle cx="80" cy="220" r="80" fill="rgb(177,236,250,0.5)"></circle>
</svg>
</div>
Sea this one.
You need to add transparency to your colors, replace fill="rgb(177,236,250)" with fill="rgba(177,236,250,0.5)". The 0.5 is the alpha value of your color, the value go from 0 (fully transparent) to 1 (opaque).
<div class="circle">
<svg height="360" width="380">
<circle cx="50" cy="50" r="50" fill="rgba(177,236,250,0.5)"></circle>
<circle cx="100" cy="120" r="90" fill="rgba(177,236,250,0.5)" ></circle>
<circle cx="290" cy="220" r="160" fill="rgba(177,236,250,0.5)"></circle>
<circle cx="80" cy="220" r="80" fill="rgba(177,236,250,0.5)"></circle>
</svg>
</div>
I just want to create above image with the use of HTML and CSS. Can somebody help me?
I'm sure there are more elegant ways to accomplish what you're looking for, but it can be accomplished using SVG, z-Index, Opacity and Clipping.
Run the code and I think you'll see it matches. The colors might not be exact but they're close enough to show you what goes where. You can also separate the Styles from the HTML and put in a CSS file, but it was just faster for me to build it this way.
I hope this helps.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#col1 {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: 3;
}
#col2 {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: 1;
}
#col3 {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: -2;
}
#col3a {
opacity: 0.90;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: 1;
}
#col4 {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: -3;
}
#col4a {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: 4;
}
#col5 {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: -4;
}
#col6 {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: -5;
}
#col7 {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: -6;
}
#col8 {
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
position: fixed;
display: block;
z-index: -7;
}
</style>
</head>
<body>
<div id="col1">
<svg height="1000" width="1000">
<circle cx="0" cy="0" r="100" fill="#ffffff" />
<circle cx="0" cy="200" r="100" fill="#ffffff" />
<circle cx="0" cy="400" r="100" fill="#ffffff" />
<circle cx="0" cy="600" r="100" fill="#ffffff" />
<circle cx="0" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col2">
<svg height="1000" width="1000">
<circle cx="100" cy="100" r="100" fill="#aba31a" />
<circle cx="100" cy="300" r="100" fill="#aba31a" />
<circle cx="100" cy="500" r="100" fill="#aba31a" />
<circle cx="100" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col3">
<svg height="1000" width="1000">
<circle cx="200" cy="0" r="100" fill="#ffffff" />
<circle cx="200" cy="200" r="100" fill="#ffffff" />
<circle cx="200" cy="400" r="100" fill="#ffffff" />
<circle cx="200" cy="600" r="100" fill="#ffffff" />
<circle cx="200" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
<circle cx="200" cy="200" r="100" fill="#326e78" />
<circle cx="200" cy="400" r="100" fill="#326e78" />
<circle cx="200" cy="600" r="100" fill="#326e78" />
<circle cx="200" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col4">
<svg height="1000" width="1000">
<circle cx="300" cy="100" r="100" fill="#aba31a" />
<circle cx="300" cy="300" r="100" fill="#aba31a" />
<circle cx="300" cy="500" r="100" fill="#aba31a" />
<circle cx="300" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
<defs>
<clipPath id="clip1">
<circle cx="200" cy="0" r="100" />
<circle cx="200" cy="200" r="100" />
</clipPath>
</defs>
<circle cx="300" cy="100" r="100" fill="#ffffff" clip-path="url(#clip1)" />
<defs>
<clipPath id="clip2">
<circle cx="200" cy="200" r="100" />
<circle cx="200" cy="400" r="100" />
</clipPath>
</defs>
<circle cx="300" cy="300" r="100" fill="#ffffff" clip-path="url(#clip2)" />
<defs>
<clipPath id="clip3">
<circle cx="200" cy="400" r="100" />
<circle cx="200" cy="600" r="100" />
</clipPath>
</defs>
<circle cx="300" cy="500" r="100" fill="#ffffff" clip-path="url(#clip3)" />
<defs>
<clipPath id="clip4">
<circle cx="200" cy="600" r="100" />
<circle cx="200" cy="800" r="100" />
</clipPath>
</defs>
<circle cx="300" cy="700" r="100" fill="#ffffff" clip-path="url(#clip4)" />
<defs>
<clipPath id="clip5">
<circle cx="200" cy="800" r="100" />
</clipPath>
</defs>
<circle cx="300" cy="900" r="100" fill="#ffffff" clip-path="url(#clip5)" />
</svg>
</div>
<div id="col5">
<svg height="1000" width="1000">
<circle cx="400" cy="0" r="100" fill="#ffffff" />
<circle cx="400" cy="200" r="100" fill="#ffffff" />
<circle cx="400" cy="400" r="100" fill="#ffffff" />
<circle cx="400" cy="600" r="100" fill="#ffffff" />
<circle cx="400" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
<circle cx="400" cy="200" r="100" fill="#326e78" />
<circle cx="400" cy="400" r="100" fill="#326e78" />
<circle cx="400" cy="600" r="100" fill="#326e78" />
<circle cx="400" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col6">
<svg height="1000" width="1000">
<circle cx="500" cy="100" r="100" fill="#aba31a" />
<circle cx="500" cy="300" r="100" fill="#aba31a" />
<circle cx="500" cy="500" r="100" fill="#aba31a" />
<circle cx="500" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
<defs>
<clipPath id="clip6">
<circle cx="400" cy="0" r="100" />
<circle cx="400" cy="200" r="100" />
</clipPath>
</defs>
<circle cx="500" cy="100" r="100" fill="#ffffff" clip-path="url(#clip6)" />
<defs>
<clipPath id="clip7">
<circle cx="400" cy="200" r="100" />
<circle cx="400" cy="400" r="100" />
</clipPath>
</defs>
<circle cx="500" cy="300" r="100" fill="#ffffff" clip-path="url(#clip7)" />
<defs>
<clipPath id="clip8">
<circle cx="400" cy="400" r="100" />
<circle cx="400" cy="600" r="100" />
</clipPath>
</defs>
<circle cx="500" cy="500" r="100" fill="#ffffff" clip-path="url(#clip8)" />
<defs>
<clipPath id="clip9">
<circle cx="400" cy="600" r="100" />
<circle cx="400" cy="800" r="100" />
</clipPath>
</defs>
<circle cx="500" cy="700" r="100" fill="#ffffff" clip-path="url(#clip9)" />
<defs>
<clipPath id="clip10">
<circle cx="400" cy="800" r="100" />
</clipPath>
</defs>
<circle cx="500" cy="900" r="100" fill="#ffffff" clip-path="url(#clip10)" />
</svg>
</div>
<div id="col7">
<svg height="1000" width="1000">
<circle cx="600" cy="0" r="100" fill="#ffffff" />
<circle cx="600" cy="200" r="100" fill="#ffffff" />
<circle cx="600" cy="400" r="100" fill="#ffffff" />
<circle cx="600" cy="600" r="100" fill="#ffffff" />
<circle cx="600" cy="800" r="100" fill="#ffffff" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
<circle cx="600" cy="200" r="100" fill="#326e78" />
<circle cx="600" cy="400" r="100" fill="#326e78" />
<circle cx="600" cy="600" r="100" fill="#326e78" />
<circle cx="600" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col8">
<svg height="1000" width="1000">
<circle cx="700" cy="100" r="100" fill="#aba31a" />
<circle cx="700" cy="300" r="100" fill="#aba31a" />
<circle cx="700" cy="500" r="100" fill="#aba31a" />
<circle cx="700" cy="700" r="100" fill="#aba31a" />
</svg>
</div>
<div id="col4a">
<svg width="1000" height="1000" >
<defs>
<clipPath id="clip11">
<circle cx="600" cy="0" r="100" />
<circle cx="600" cy="200" r="100" />
</clipPath>
</defs>
<circle cx="700" cy="100" r="100" fill="#ffffff" clip-path="url(#clip11)" />
<defs>
<clipPath id="clip12">
<circle cx="600" cy="200" r="100" />
<circle cx="600" cy="400" r="100" />
</clipPath>
</defs>
<circle cx="700" cy="300" r="100" fill="#ffffff" clip-path="url(#clip12)" />
<defs>
<clipPath id="clip13">
<circle cx="600" cy="400" r="100" />
<circle cx="600" cy="600" r="100" />
</clipPath>
</defs>
<circle cx="700" cy="500" r="100" fill="#ffffff" clip-path="url(#clip13)" />
<defs>
<clipPath id="clip14">
<circle cx="600" cy="600" r="100" />
<circle cx="600" cy="800" r="100" />
</clipPath>
</defs>
<circle cx="700" cy="700" r="100" fill="#ffffff" clip-path="url(#clip14)" />
<defs>
<clipPath id="clip15">
<circle cx="600" cy="800" r="100" />
</clipPath>
</defs>
<circle cx="700" cy="900" r="100" fill="#ffffff" clip-path="url(#clip15)" />
</svg>
</div>
<div id="col3a">
<svg height="1000" width="1000">
<circle cx="800" cy="200" r="100" fill="#326e78" />
<circle cx="800" cy="400" r="100" fill="#326e78" />
<circle cx="800" cy="600" r="100" fill="#326e78" />
<circle cx="800" cy="800" r="100" fill="#326e78" />
</svg>
</div>
<div id="col1">
<svg height="1000" width="1000">
<circle cx="900" cy="100" r="100" fill="#ffffff" />
<circle cx="900" cy="300" r="100" fill="#ffffff" />
<circle cx="900" cy="500" r="100" fill="#ffffff" />
<circle cx="900" cy="700" r="100" fill="#ffffff" />
<circle cx="900" cy="900" r="100" fill="#ffffff" />
</svg>
</div>
</body>
</html>
I am making face SVG. Unable to set eyebrow on proper place. Please advice.
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>
You may use g element and add translation (useful if you will have more path to move at the same time):
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<g transform="translate(40,20)">
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</g>
</svg>
Or simply translation on path:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path transform="translate(40,20)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>
Here is the full SVG with both eyebrow (translation for both using g and then translate the 2nd one relatively to g). With this configuration you have to simply adjust the translation of g element if want it upper of lower
svg g {
transition: 0.5s;
}
svg:hover g {
transform: translate(10px, 15px);
}
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<g transform="translate(10,20)">
<path d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
<path transform="translate(30,0)" d="M10,20 Q25,10 40,20" fill="none" stroke="#000" stroke-width="1.5px" />
</g>
</svg>
Use the transform attribute to position the path, like
transform="translate(50,80)"
Make sure you don't use px
Other transformations like scale or rotate are also available. See the specs.
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="none" />
<ellipse cx="35" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<ellipse cx="65" cy="45" rx="4" ry="5" stroke="red" stroke-width="2" fill="none" />
<path d="M16, 20 Q27, 10 35, 20" transform="translate(9, 17)" fill="none" stroke="#000" stroke-width="1.5px" />
<path d="M16, 20 Q27, 10 35, 20" transform="translate(40, 17)" fill="none" stroke="#000" stroke-width="1.5px" />
</svg>
I would like to display, in SVG, a lot of circles. Each of us would contain an image.
I've found a way for doing that. I define a pattern :
<defs>
<pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="1" width="1" y="0" x="0" id="imageExample">
<image height="1" width="1" y="0" x="0" xlink:href="img/imageExample.png"/>
</pattern>
</defs>
And then I display the circle :
<circle cx=x cy=y r=r stroke="white" stroke-width="2" fill="url(#imageExample)"/>
My question is : is it necessary to define 1000 patterns if I want to display 1000 circles ?
[edit] I want that each circle has a different background image, sorry.
of course, i isn't. see the demo below, also avaliable online:
<?xml version="1.0" encoding="utf-8"?>
<!-- SO: http://stackoverflow.com/questions/16174765/display-a-lot-of-images-in-background-svg -->
<!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:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xlink="http://www.w3.org/1999/xlink"
version="1.1"
width="20cm" height="20cm"
viewBox="0 0 1000 1000"
preserveAspectRatio="xMinYMin"
style="background-color:white; border: solid 1px black;"
>
<defs>
<pattern preserveAspectRatio="true" patternContentUnits="objectBoundingBox" height="1" width="1" y="0" x="0" id="imageExample">
<image height="1" width="1" y="0" x="0" xlink:href="img/imageExample.png"/>
</pattern>
</defs>
<circle cx="123" cy="109" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="456" cy="332" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="12" cy="444" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="77" cy="567" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="66" cy="712" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="47" cy="855" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="843" cy="30" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="112" cy="321" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="387" cy="543" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
<circle cx="444" cy="67" r="10" stroke="black" stroke-width="1" fill="url(#imageExample)"/>
</svg>