I'd like to use CSS to set the fill of the bottom right circle to green.
The snippet below successfully colors entire shape to green, but I just want to color part of the shape (just the circle).
[row="2"] [col="b"] {fill: green;}
<svg>
<defs>
<symbol id="myShape">
<polygon points="0,0 40,0 20,20" />
<circle r="10" cx="10" cy="10" stroke="black" />
</symbol>
</defs>
<g row="1" translate="transform(0,0)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
<g row="2" transform="translate(0,50)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
</svg>
If you want something to always be a specific colour, then set it to be that colour explicitly.
[row="2"] [col="b"] {fill: green;}
[row="1"] [col="b"] {fill: blue;}
<svg>
<defs>
<symbol id="myShape">
<polygon points="0,0 40,0 20,20" fill="black" />
<circle r="10" cx="10" cy="10" stroke="black" />
</symbol>
</defs>
<g row="1" translate="transform(0,0)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
<g row="2" transform="translate(0,50)">
<use col="a" xlink:href="#myShape" x="0" />
<use col="b" xlink:href="#myShape" x="50" />
</g>
</svg>
I am using the code below to put an image in an SVG and some bunch of text directly below it:
<td>
<table>
<tr>
<td>
<svg width="200" height="250">
<defs>
<clipPath id="circleView">
<circle cx="50" cy="50" r="50" fill="#FFFFFF" />
</clipPath>
</defs>
<image width="100" height="100"
xlink:href="http://etc.usf.edu/clipart/63300/63348/63348_clock_500_md.gif" clip-path="url(#circleView)" />
<text baseline-shift="-130px" text-anchor="bottom" class="smallh2">headertext</text>
<text baseline-shift="-160px" text-anchor="bottom" class="smallh2" id="objecta"></text>
</svg>
</td>
</tr>
</table>
</td>
The first<text> shows the heading while the second one calls a html element which has a figure.
The above code works pretty well in Google Chrome but somehow doesn't show the text in IE and Edge.
Replace baseline-shift with y for text. It works in all browsers.
<svg width="200" height="250">
<defs>
<clipPath id="circleView">
<circle cx="50" cy="50" r="50" fill="#FFFFFF" />
</clipPath>
</defs>
<image width="100" height="100"
xlink:href="http://etc.usf.edu/clipart/63300/63348/63348_clock_500_md.gif" clip-path="url(#circleView)" />
<text y="130" text-anchor="bottom" class="smallh2">headertext</text>
<text baseline-shift="-160px" text-anchor="bottom" class="smallh2" id="objecta"></text>
</svg>
These shapes all display properly, but for some reason there is a HUGE vertical gap of like 10,000px between the first 2 shapes and the remaining shapes. When I open the page I have to scroll down a lot of white space to see the rest of the shapes. I have not been able to figure out what is causing that.
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
<svg width="2000" height="2000">
<circle cx="80" cy="80" r="50" fill="green" />
</svg>
<svg width="2000" height="2000">
<rect cx="80" cy="80" r="50" fill="blue" />
</svg>
<!-- THERE IS A WEIRD GAP HERE -->
<!-- SVG Rounded Rectangle
Example -->
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150" height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
<!-- SVG Star
Example -->
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
<!-- SVG Logo
Example -->
<svg height="130" width="500">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
<text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
Sorry, your browser does not support inline SVG.
</svg>
I am quite new in website building and currently deal with the Scalable Vector Graphics (SVG). I have read some online materials that <object> is suggested to add an .svg file on website, e.g.
<object type="image/svg+xml" data="/img/svg/home78.svg"></object>
It is nice that the svg appears nicely, but I would like to change its properties like changing the original colour from black to blue. Is there any way to do by using css? Or are there any alternatives?
Thanks.
Using Inline Style Sheets
It is possible to define the styles for your shapes in an inline style sheet, and then have all these styles automatically applied to your shapes. Here is an example:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
<![CDATA[
.mycircle {
stroke: #006600;
fill: #00cc00;
}
.otherclass {
fill: blue;
}
]]>
</style>
<circle class="mycircle" cx="40" cy="40" r="24" />
<circle cx="120" cy="40" r="24" fill="red" />
<circle class="otherclass" cx="200" cy="40" r="24" />
</svg>
In addition, you can use #import url("/path/to/your.css"); to maintain separate css like this
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<style type="text/css">
#import url("/path/to/your.css");
</style>
<circle class="mycircle" cx="40" cy="40" r="24" />
<circle cx="120" cy="40" r="24" fill="red" />
<circle class="otherclass" cx="200" cy="40" r="24" />
</svg>
aside note: I cant use a stacksnippet here, due is unable to import additional resources.
Another Alternative:
You can use javascript to alter the <svg> programmatically like this:
document.getElementById('circle1')
.setAttribute('fill','red');
document.getElementById('circle2')
.setAttribute('fill','yellow');
document.getElementById('circle3')
.setAttribute('fill','green');
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<circle id="circle1" cx="40" cy="40" r="20" />
<circle id="circle2" cx="40" cy="80" r="20" />
<circle id="circle3" cx="40" cy="120" r="20" />
</svg>
Related Answer: https://stackoverflow.com/a/27462277/2573335
So, I've been asked to create a static SVG file, and have been told to use <defs> and <use> to make it more efficient.
I understand there is code repetition but I'm not sure how to go about reducing what I have and still being able to have the same output.
Here is the code:
<!DOCTYPE html>
<html>
<body>
<center>
<h1>Static SVG</h1>
<svg width="200" height="200">
<!--transforming the group of shapes so that the origin is at the center of the svg image-->
<g transform="translate(100,100)">
<!--This is effectively the background-->
<rect x="-100" y="-100" width="200" height="200" style="fill:grey" />
<!--Inner rounded rectangle-->
<rect x="-40" y="-40" rx="5" ry="5" width="80" height="80" style="fill:black" />
<!--Four inner-most short arrows-->
<polygon points="0,-60 10,-50 0,-55 -10,-50" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="60,0 50,-10 55,0 50,10" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="-60,0 -50,10 -55,0 -50,-10" style="fill:black;stroke:lime;stroke-width:1" />
<polygon points="0,60 10,50 0,55 -10,50" style="fill:black;stroke:lime;stroke-width:1" />
<!--Middle short arrows-->
<polygon points="0,-80 10,-70 0,-75 -10,-70" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="80,0 70,-10 75,0 70,10" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="-80,0 -70,10 -75,0 -70,-10" style="fill:red;stroke:black;stroke-width:1" />
<polygon points="0,80 10,70 0,75 -10,70" style="fill:red;stroke:black;stroke-width:1" />
<!--Outer-most short arrows-->
<polygon points="0,-100 10,-90 0,-95 -10,-90" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="100,0 90,-10 95,0 90,10" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="-100,0 -90,10 -95,0 -90,-10" style="fill:lime;stroke:black;stroke-width:1" />
<polygon points="0,100 10,90 0,95 -10,90" style="fill:lime;stroke:black;stroke-width:1" />
<!--Longer Arros positioned diagonally from origin-->
<polygon points="40,50 50,50 50,40 60,60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="-50,-40 -50,-50 -40,-50 -60,-60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="50,-40 50,-50 40,-50 60,-60" style="fill:yellow;stroke:black;stroke-width:1" />
<polygon points="-50,40 -50,50 -40,50 -60,60" style="fill:yellow;stroke:black;stroke-width:1" />
<!--The elliptical shape in the centre of the rounded Square-->
<ellipse cx="0" cy="0" rx="20" ry="40" style="fill:white" />
</g>
</svg>
</center>
</body>
</html>
You're drawing the same polygons for the most part albeit rotated and positioned differently.
Along with moving their styles into a class, you can use defs and use like this:
<defs>
<!-- Define your shape here once -->
<polygon points="0,-60 10,-50 0,-55 -10,-50"
class="inner-arrow" id="inner-arrow" />
</defs>
<!-- Reuse multiple times
with the rotation (and translation if needed) handled by transform -->
<use xlink:href="#inner-arrow" />
<use xlink:href="#inner-arrow" transform="rotate(90)" />
<use xlink:href="#inner-arrow" transform="rotate(180)" />
<use xlink:href="#inner-arrow" transform="rotate(270)" />
Here's a DEMO that has the first inner arrows' code updated.
You can use and reuse symbols, which can have individual viewBoxes and be rotated and scaled like groups. The units in the symbols are proportional to the viewBox.
Here is a JSFiddle with your arrows coded and grouped using symbols:
<svg width="200" height="200" viewBox="0 0 200 200">
<defs>
<symbol id="sm_arrow" viewBox="0 0 20 10">
<polygon points="10,0 20,10 10,5 0,10" />
</symbol>
<symbol id="lg_arrow" viewBox="0 0 200 200">
<polygon points="0,10 10,10 10,0 20,20" />
</symbol>
<symbol id="triple_arrow" viewBox="0 5 200 10">
<use xlink:href="#sm_arrow"/>
<use xlink:href="#sm_arrow" transform="translate(0,20)" />
<use xlink:href="#sm_arrow" transform="translate(0,40)" />
</symbol>
<symbol id="arrows" viewBox="0 0 200 200">
<g id="small_arrows">
<use xlink:href="#triple_arrow" transform="translate(0,-90)" />
<use xlink:href="#triple_arrow" transform="translate(290,0) rotate(90)" />
<use xlink:href="#triple_arrow" transform="translate(200,290) rotate(180)" />
<use xlink:href="#triple_arrow" transform="translate(-90,200) rotate(-90)" />
</g>
<g id="long_arrows" transform="translate(60,60)">
<use xlink:href="#lg_arrow" transform="translate(80,80)" />
<use xlink:href="#lg_arrow" transform="translate(0,80) rotate(90)" />
<use xlink:href="#lg_arrow" transform="rotate(180)" />
<use xlink:href="#lg_arrow" transform="translate(80,0) rotate(-90)" />
</g>
</symbol>
<g id="background">
<rect width="200" height="200"/>
<rect x="60" y="60" rx="5" ry="5" width="80" height="80"/>
<ellipse cx="100" cy="100" rx="20" ry="40"/>
</g>
</defs>
<use xlink:href="#background"/>
<use xlink:href="#arrows"/>
</svg>
The styles were transferred to a CSS block or file:
polygon {
stroke-width: 1;
}
#triple_arrow use:nth-child(1) {
fill:black;
stroke:lime;
}
#triple_arrow use:nth-child(2) {
fill: red;
stroke: black;
}
#triple_arrow use:nth-child(3) {
fill: lime;
stroke: black;
}
#lg_arrow {
fill:yellow;
stroke:black;
}
#background rect:nth-child(1) {
fill:grey;
}
#background rect:nth-child(2) {
fill:black;
}
#background ellipse {
fill:white;
}