I am trying to create a scale with radial lines and numbers with range 0-100.
Here is my code:
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<title>SVG Gauge</title>
</head>
<style>
#wrapper {
position: relative;
margin: auto;
}
#meter {
width: 100%;
height: 100%;
transform: rotateX(180deg);
}
.circle {
fill: none;
}
#mask {
stroke: #404040;
stroke-width: 60;
}
.blackie {
fill:none;
stroke: #000000;
stroke-width: 30;
}
.range {
stroke-width: 60;
}
.scale {
stroke: #cccccc;
}
#slider, #lbl {
position: absolute;
}
#slider {
cursor: pointer;
left: 0;
margin: auto;
right: 0;
top: 58%;
width: 94%;
}
#lbl {
background-color: #4B4C51;
border-radius: 2px;
color: white;
font-family: 'courier new';
font-size: 15pt;
font-weight: bold;
padding: 4px 4px 2px 4px;
right: -48px;
top: 57%;
}
#meter_needle {
height: 40%;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 10%;
transform-origin: bottom center;
transform: rotate(270deg);
}
</style>
<body>
<div id="wrapper">
<svg id="meter">
<g class="scale">
<defs>
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(102, 102, 255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(204, 204, 255);stop-opacity:1" />
</linearGradient>
</defs>
<circle id="high" class="circle range" cx="50%" cy="50%" stroke="url(#grad)">
</circle>
<circle id="mask" class="circle" cx="50%" cy="50%">
</circle>
<circle id="low" class="blackie" cx="50%" cy="50%" r="360">
</circle>
<circle id="outline_ends" class="circle outline" cx="50%" cy="50%">
</circle>
</g>
</svg>
<img id="meter_needle" src="gauge-needle.svg" alt="">
<input id="slider" type="range" min="0" max="100" value="0" />
<label id="lbl" id="value" for="">0%</label>
</div>
<script>
var r = 400;
var circles = document.querySelectorAll('.circle');
var total_circles = circles.length;
for (var i = 0; i < total_circles; i++) {
circles[i].setAttribute('r', r);
}
var meter_dimension = (r * 2) + 100;
var wrapper = document.querySelector('#wrapper');
wrapper.style.width = meter_dimension + 'px';
wrapper.style.height = meter_dimension + 'px';
var cf = 2 * Math.PI * r;
var semi_cf = cf / 2;
var z = 40 * Math.PI;
document.querySelector('#outline_ends')
.setAttribute('stroke-dasharray', 2 + ',' + (semi_cf - 2));
document.querySelector('#high')
.setAttribute('stroke-dasharray', semi_cf + ',' + cf);
document.querySelector('#mask')
.setAttribute('stroke-dasharray', semi_cf + ',' + cf);
document.querySelector('#low')
.setAttribute('stroke-dasharray', semi_cf - z + ',' + cf);
var slider = document.querySelector('#slider');
var lbl = document.querySelector("#lbl");
var svg = document.querySelector('#meter');
var high = document.querySelector('#high');
var mask = document.querySelector('#mask');
var low = document.querySelector('#low');
var meter_needle = document.querySelector('#meter_needle');
function range_change_event() {
var percent = slider.value;
var meter_value = semi_cf - ((percent * semi_cf) / 100);
mask.setAttribute('stroke-dasharray', meter_value + ',' + cf);
meter_needle.style.transform = 'rotate(' + (270 + ((percent * 180) / 100)) + 'deg)';
lbl.textContent = percent + '%';
}
slider.addEventListener('input', range_change_event);
</script>
</body>
</html>
I have found on the web plenty of good examples with HTML canvas and D3js but nothing based on SVG..
I am thinking to create an element "line" and add it across the black arc.
What is the simplest way to create the numeric scale?
Here you go:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-250 -250 500 500" width="500" height="500" id="svg">
<defs>
<style>
line {
stroke: black;
stroke-width: 1px;
}
text {
fill: red;
text-anchor: middle;
font-size: 16px;
font-family: sans-serif;
}
rect {
fill: transparent;
}
#id {
display: none;
}
.origin {
fill: green;
}
.outer {
fill: none;
stroke: black;
}
</style>
</defs>
<circle r="5" cx="0" cy="0" class="origin"/>
<path d="M-180,0 a1,1 0 0,1 360,0" class="outer"/>
<g id="gauge" transform="rotate(-90)">
<g id="noon">
<rect x="-10" y="-220" width="20" height="100"/>
<line x1="0" y1="-190" x2="0" y2="-180"/>
<text x="0" y="-200"></text>
</g>
</g>
</svg>
<script>
for (i=0; i<=180; i = i + 18) {
var new_tick = noon.cloneNode(true);
new_tick.getElementsByTagName('text')[0].textContent = i/180 * 100;
new_tick.removeAttribute("id");
new_tick.setAttribute("transform", "rotate(" + i + " 0 0)");
gauge.appendChild(new_tick);
}
</script>
I think this is fairly self-explanatory. (For example the RECT is just a guide which you can turn on - by changing the fill - if you want to better visualize what's going in inside each G.)
Let me know if you have any follow on questions.
Here's a Codepen, if it helps: https://codepen.io/MSCAU/pen/OoQMdV
What is the simplest way to create the numeric scale?
The easiest way to animate the scaling of the svg circle is to animate its radius
<svg version="1.1" 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="10" fill="none" stroke-width="2" stroke="purple" >
<animate attributeName="r" values="1;100;1" dur="4s" repeatCount="indefinite" />
</circle>
</svg>
Related
I am creating a donut chart with svg, and I would like to have tooltips on hover of the donut rings. I am building the donut like this:
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: transparent;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: transparent;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.circle2 {
fill: transparent;
stroke: orangered;
stroke-width: 7;
stroke-dasharray: 45 55;
stroke-dashoffset: -30;
}
.circle3 {
fill: transparent;
stroke: orchid;
stroke-width: 7;
stroke-dasharray: 20 80;
stroke-dashoffset: -75;
}
.circle4 {
fill: transparent;
stroke: yellowgreen;
stroke-width: 7;
stroke-dasharray: 5 95;
stroke-dashoffset: -95;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<svg class="pie-center" viewBox="0 0 32 32">
<circle class="circle1" r="15.915494309" cx="16" cy="16" />
<circle class="circle2" r="15.915494309" cx="16" cy="16" />
<circle class="circle3" r="15.915494309" cx="16" cy="16" />
<circle class="circle4" r="15.915494309" cx="16" cy="16" />
</svg>
</div>
</div>
</body>
</html>
I know that I can use the <set /> tag to capture mouse events, and I can use those to create a tooltip. The problem is each section of the donut ring is actually a circle, and the stroke property on the circle is the part I actually want to capture the hover event for.
Therefore, when I try to add hover actions to my circles I don't get desired results.
This is what I have tried (just turning the donut section red on hover to simulate capturing the event for adding a tooltip):
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: transparent;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: transparent;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.circle2 {
fill: transparent;
stroke: orangered;
stroke-width: 7;
stroke-dasharray: 45 55;
animation: dash3 1s ease 0s 1 forwards;
stroke-dashoffset: -30;
}
.circle3 {
fill: transparent;
stroke: orchid;
stroke-width: 7;
stroke-dasharray: 20 80;
animation: dash2 1s ease 0s 1 forwards;
stroke-dashoffset: -75;
}
.circle4 {
fill: transparent;
stroke: yellowgreen;
stroke-width: 7;
stroke-dasharray: 5 95;
animation: dash 1s ease 0s 1 forwards;
stroke-dashoffset: -95;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card new">
<svg class="pie-center" viewBox="0 0 32 32">
<circle class="circle1" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='teal' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle2" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='orangered' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle3" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='orchid' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle4" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='yellowgreen' to='red' begin='mouseover' end='mouseout' />
</circle>
</svg>
</div>
</body>
</html>
My question is: Is there any way to capture hover events on the circle strokes? Or is there another way to create a donut chart, using say <path /> or some other svg element that will better support the hover events?
I would like to not use third party libraries if possible (no D3, or chart.js).
Use fill: none rather than fill: transparent so that the fill does not react. In fact there's really no good reason to use fill: transparent ever.
.container {
display: flex;
flex-flow: row wrap;
}
.card {
width: 20em;
height: 20em;
padding: 2em;
background-color: white;
margin: 2em;
box-shadow: 0 0 5px #222;
}
.pie-center {
background: none;
border-radius: 50%;
transform: rotate(-90deg);
}
.circle1 {
fill: none;
stroke: teal;
stroke-width: 7;
stroke-dasharray: 30 70;
}
.circle2 {
fill: none;
stroke: orangered;
stroke-width: 7;
stroke-dasharray: 45 55;
animation: dash3 1s ease 0s 1 forwards;
stroke-dashoffset: -30;
}
.circle3 {
fill: none;
stroke: orchid;
stroke-width: 7;
stroke-dasharray: 20 80;
animation: dash2 1s ease 0s 1 forwards;
stroke-dashoffset: -75;
}
.circle4 {
fill: none;
stroke: yellowgreen;
stroke-width: 7;
stroke-dasharray: 5 95;
animation: dash 1s ease 0s 1 forwards;
stroke-dashoffset: -95;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="card new">
<svg class="pie-center" viewBox="0 0 32 32">
<circle class="circle1" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='teal' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle2" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='orangered' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle3" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='orchid' to='red' begin='mouseover' end='mouseout' />
</circle>
<circle class="circle4" r="15.915494309" cx="16" cy="16" >
<set attributeName='stroke' from='yellowgreen' to='red' begin='mouseover' end='mouseout' />
</circle>
</svg>
</div>
</body>
</html>
This is my first time using SVG and I want to know if it is possible to create an animated line graph with an arrow. I have found multiple examples of animated line graphs without arrows, non-animated line graphs with arrows, and animated straight lines with arrows, but not exactly what I am looking for. I have attached some codepen examples I've been playing around with below. Does anyone know if this is possible/have a solution? It would be greatly appreciated!
Animated line missing arrow (needs arrow):
http://codepen.io/alexandraleigh/pen/jVaObd
# HTML
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844" id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
</g>
</svg>
</div>
# CSS(Less)
#import "lesshat";
#darkgrey: #303030;
*{
box-sizing: border-box;
}
body{
background: #darkgrey;
}
.graph__wrapper{
width: 400px;
margin: 30px auto;
position: relative;
svg{
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: dash 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.description{
font-family: "Roboto";
color:lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
Animated straight line with arrow (needs to stop at multiple points on path):
http://codepen.io/alexandraleigh/pen/yVPYrY
I tried adding the path descriptions from #1 to #2 and it has the desired final graph, just no animations:
http://codepen.io/alexandraleigh/pen/pNdgWR
I also tried adding the arrow marker from #2 to #1, but the arrow doesn't animate:
http://codepen.io/alexandraleigh/pen/aBVdVY
I'm also open to using a plugin such as http://snapsvg.io/, but haven't seen any working examples that help my situation.
you can do this with offset-motion(old syntax: motion-path).
Be aware that this is a heighly experimental feature. it currently only works in Chrome. More to the point i use the "old" syntax here as that is what currently works in chrome, but it will soon switch to the new systax...
* {
box-sizing: border-box;
}
body {
background: #303030;
}
.graph__wrapper {
width: 400px;
margin: 30px auto;
position: relative;
svg {
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 428;
stroke-dashoffset: 428;
animation: dash 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
#keyframes pm {
from {
motion-offset: 0%;
}
to {
motion-offset: 100%
}
}
#arrow {
animation: pm 3s ease-in forwards;
animation-iteration-count: 1;
animation-delay: 1s;
motion-path: path('M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844');
motion-rotation: auto;
motion-anchor: center;
}
.description {
font-family: "Roboto";
color: lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
<polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white" />
</g>
</svg>
</div>
you can also do this with animateMotion, but svg animations are soon to be depricted. You will have to rewrite your code in any way sooner or later :-(
* {
box-sizing: border-box;
}
body {
background: #303030;
}
.graph__wrapper {
width: 400px;
margin: 30px auto;
position: relative;
svg {
position: absolute;
margin: 36px 0px 0px 15px;
}
}
.path {
stroke-dasharray: 428;
stroke-dashoffset: 428;
animation: dash 3s linear forwards;
animation-iteration-count: 1;
animation-delay: 1s;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.description {
font-family: "Roboto";
color: lighten(#darkgrey, 50%);
text-align: center;
margin: 40px 0px;
}
<div class="graph__wrapper">
<svg width="315px" height="107px" viewBox="0 0 315 107" version="1.1" style="overflow:visible">
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<path d="M2.10546875,95.75 L40.5546875,68.3476562 L55.2109375,81.1796875 L65.2148437,76.3945312 L96.1835937,86.8320312 L131.023438,19.9414062 L142.15625,23.7226562 L183.605469,2.1953125 L211.007812,22.3320312 L234.320312,71.5664062 L234.667969,83.0039062 L244.019531,83.0039062 L247.105469,88.8320312 L312.695312,104.839844"
id="Path-1" stroke="white" stroke-width="4" sketch:type="MSShapeGroup" class="path"></path>
<polyline id="arrow" points="0,-5 10,0 0,5 1,0" fill="white">
<animateMotion rotate="auto" begin="1s" dur="3s" repeatCount="1" fill="freeze">
<mpath xlink:href="#Path-1" />
</animateMotion>
</polyline>
</g>
</svg>
</div>
I have an SVG within a web page, it consists of images + text
<object data="/infographic/timeline.svg" type="image/svg+xml">
<img src="/infographic/timeline.svg" alt="Timeline">
</object>
All the images are responsive, but the text isn't, so the text becomes really, REALLY small.
snippet of SVG (its massive)
<defs>
<style>
.cls-1 {
font-size: 60.014px;
}
.cls-1, .cls-10 {
opacity: 0.69;
}
.cls-1, .cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
fill: #ffffff;
}
.cls-1, .cls-10, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-9 {
text-anchor: middle;
}
.cls-1, .cls-3, .cls-6 {
font-family: "Roboto";
}
.cls-2 {
font-size: 32.014px;
}
.cls-3 {
font-size: 14.089px;
}
.cls-3, .cls-6 {
fill: #db7426;
}
.cls-4, .cls-6 {
font-size: 32px!important;
}
.cls-10, .cls-4, .cls-5, .cls-7, .cls-8, .cls-9 {
font-family: Roboto;
}
.cls-5 {
font-size: 24px;
}
.cls-5, .cls-8, .cls-9 {
font-weight: 400;
}
.cls-6 {
font-weight: 600;
}
.cls-10, .cls-7 {
font-size: 18.75px;
font-weight: 300;
}
.cls-7 {
opacity: 0.4;
}
.cls-8, .cls-9 {
font-size: 22px;
}
</style>
</defs>
<text id="Who_are_you_what_do_you_do_what_s_your_why_What_s_been_keepi" data-name="Who are you, what do you do, what’s your why? What’s been keepi" class="cls-8" x="397.706" y="535.325">Who are you, what do you do, what’s your why?<tspan x="397.706" dy="26.4">What’s been keeping you lying awake at night. </tspan></text>
Is there anyway I can get the text size to increase as the SVG/screen width gets smaller?
Any help would be greatly appreciated.
It's not possible with pure SVG (at least not yet). The only solution would be to either:
inline the SVG and manipulate the size of the text with javascript.
inline the SVG and control the size of the text with media queries (see below).
Add CSS to the SVG and use media queries there (see below).
use media queries to switch SVGs when the page gets small
Example of option 2: Using media queries with inlined SVGs
text {
font-size: 10px;
}
#media (max-width: 400px) {
text {
font-size: 20px;
}
}
<svg viewBox="0 0 100 100" width="100%" height="100%">
<circle cx="50" cy="50" r="50" fill="orange"/>
<text x="50" y="60" text-anchor="middle">Testing</text>
</svg>
Example of option 3: Using media queries in CSS in the SVGs
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100%" height="100%">
<style>
text {
font-size: 10px;
}
#media (max-width: 400px) {
text {
font-size: 20px;
}
}
</style>
<circle cx="50" cy="50" r="50" fill="orange"/>
<text x="50" y="60" text-anchor="middle">Testing</text>
</svg>
This is possible using the foreignObject svg element in a html context and some adjustment of the viewBow.
On this demos, the text stay selectable:
.demo {
overflow: auto;
resize: both;
border:1px black solid;
width: 230px;
height: 130px
}
.svgtext {
font-size: 28rem;
height:100%;
width:100%
}
<div class="demo">
<svg x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
<foreignObject x="12" y="23" height="100%" width="100%">
<div class"svgtext">
Hello world!
</div>
</foreignObject>
</svg>
</div>
Use preserveAspectRatio to control the resizing behavior:
.demo {
overflow: auto;
resize: both;
border:1px black solid;
width: 230px;
height: 130px
}
.svgtext {
font-size: 28rem;
height:100%;
width:100%
}
<div class="demo">
<svg preserveAspectRatio="none" x="0" y="30" viewBox="0 0 100 100" width="100%" height="100%">
<foreignObject x="12" y="23" height="100%" width="100%">
<div class"svgtext">
Hello world!
</div>
</foreignObject>
</svg>
</div>
Why, "box-sizing: border-box;" only when it is used, and become a point?
Please tell me whether guided by what formula?
Chrome Version
44.0.2403.157 m
Do not use box-sizing
<style>
svg {
border: 1px solid #ddd;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<svg preserveAspectRatio="none" viewBox="0 0 2000 400" width="500" height="400">
<rect id="hoge" x="50" y="50" width="50" height="50"/>
</svg>
<script>
console.log($("#hoge").offset()); //Object {top: 59, left: 21.5}
</script>
use box-sizing
<style>
svg {
border: 1px solid #ddd;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<svg preserveAspectRatio="none" viewBox="0 0 2000 400" width="500" height="400">
<rect id="hoge" x="50" y="50" width="50" height="50"/>
</svg>
<script>
console.log($("#hoge").offset()); //Object {top: 58.75, left: 21.450000762939453}
</script>
When you use border-box the width of content is changed, instead of using 400px in height it can now only use (400px - 2px) 398px. Because of that the svg itself has to displayed smaller.
The underlaying calculations for your example looks as follows:
offset.top = margin of body + border + (svg content height / viewBox height * rect y)
In your first example this means
:8px (default value) + 1px + (400px / 2000 * 50) = 59
Your second example:
8px (default value) + 1px + (398px / 400 * 50) = 58.75
Read this css-tricks article for further explanation of the box model.
The gradient and marker definitions for my SVG appear to get overwritten when my SVG is inside my webpage. There are no other SVGs on the page.
But when I take the SVG out of the page, it looks just fine.
Here is the SVG in this example.
<svg xmlns="http://www.w3.org/2000/svg" height="500" width="800">
<style>
svg .node.species {
stroke: #FFB800;
stroke-width: 3px;
size: 300px;
}
svg .node.reaction {
stroke: #8089F7;
opacity: 0;
stroke-width: 1.5px;
}
svg .link {
stroke: black;
stroke-width: 3px;
}
svg .link.modifier {
stroke-dasharray: 5, 5;
}
svg .node-label {
font-size: 14px;
font-family: Georgia;
font-weight: bolder;
text-anchor: middle;
dominant-baseline: middle;
}
/* svg .node.selected {
stroke: #FF0000;
}
svg .link.selected {
stroke: #FF0000;
}*/
svg marker {
overflow: visible;
}
svg .null-symbol {
fill: none;
stroke: black;
stroke-width: 3px;
}
</style>
<defs>
<linearGradient id="gradient">
<stop offset="5%" stop-color="#FFDC9E"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<linearGradient id="markerGradient">
<stop offset="5%" stop-color="rgb(97, 116, 255)"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<linearGradient id="reactionGradient">
<stop offset="5%" stop-color="#B0C0FF"></stop>
<stop offset="95%" stop-color="#FFF"></stop>
</linearGradient>
<marker case-sensitive="refX,refY" id="production" viewBox="0 0 10 10" markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
<path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)" d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
</marker>
<marker case-sensitive="refX,refY" id="degradation" viewBox="0 0 10 10" markerWidth="10" markerHeight="10" orient="auto" refx="-2" refy="0" refX="-2" refY="0">
<path fill="url(#markerGradient)" stroke="#0013FF" transform="rotate(-90)" d="M0,2.0808957251439084L2.4028114141347543,-2.0808957251439084 -2.4028114141347543,-2.0808957251439084Z"></path>
</marker>
<marker case-sensitive="refX,refY" id="modifier" viewBox="0 0 10 10" markerWidth="30" markerHeight="30" orient="auto" refx="-0.4" refy="0" refX="-0.4" refY="0">
<path stroke="black" stroke-width="0.3" fill="none" d="M0,0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,-0.5641895835477563A0.5641895835477563,0.5641895835477563 0 1,1 0,0.5641895835477563Z"></path>
</marker>
</defs>
<g transform="translate(, )scale(1)">
<g>
<line class="reaction production link" marker-end="url(#production)" x1="449.9996697164325" y1="218.45791860388687" x2="451.42692033038736" y2="246.7481154723436">
</line><line class="reaction production link" marker-end="url(#production)" x1="399.21583821133174" y1="309.0153067725509" x2="345.33989421522693" y2="338.2824980727582">
</line>
</g>
<g>
<line class="reaction reactant link" x1="446.9075572254284" y1="157.1677217354301" x2="449.9996697164325" y2="218.45791860388687">
</line><line class="reaction reactant link" x1="453.0917822074366" y1="279.7481154723436" x2="399.21583821133174" y2="309.0153067725509">
</line>
</g>
<g>
</g>
<g draggable="" transform="translate(446.9075572254284,157.1677217354301)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S1, Name: S1</title>
</rect>
<text class="node-label">S1</text>
</g><g draggable="" transform="translate(453.0917822074366,279.7481154723436)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S2, Name: S2</title>
</rect>
<text class="node-label">S2</text>
</g><g draggable="" transform="translate(345.33989421522693,338.2824980727582)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<rect class="species node" fill="url(#gradient)" x="-50" y="-15" width="100" height="30" ry="15">
<title>ID: S3, Name: S3</title>
</rect>
<text class="node-label">S3</text>
</g>
<g draggable="" transform="translate(473.4770117242872,216.74146493626216)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<circle class="node reaction" fill="url(#reactionGradient)" r="5">
<title>ID: reaction1, Name: reaction1</title>
</circle>
<text class="node-label"></text>
</g><g draggable="" transform="translate(409.9633485910613,329.9478703486097)" style="position: relative; border: 1px solid red; background-color: rgb(211, 211, 211); cursor: pointer;">
<circle class="node reaction" fill="url(#reactionGradient)" r="5">
<title>ID: reaction2, Name: reaction2</title>
</circle>
<text class="node-label"></text>
</g>
</g>
</svg>
EDIT 1
Here is the style of the linearGradient element
EDIT 2
Style of the defs element
EDIT 3
I found that when I remove the head tag, and then reapply it, the SVG is then correctly rendered. Weird.
Turns out I had <base href="/"> in head which was messing things up.