Custom SVG Symbol for location for highcharts - javascript

I have to create a location SVG icon in a similar way which is created for plus. I don't know how to create the icons in a similar style.
Location Icon: https://fonts.google.com/icons?selected=Material+Icons:add_location:
Icon creation:
Highcharts.SVGRenderer.prototype.symbols.plus = function (x, y, w, h)
{
return [ 'M', x, y + h / 2, 'L', x + w, y + h / 2, 'M', x + w / 2, y, 'L', x + w / 2, y + h, 'z' ];
};
Use
this.iConobject = this.highChart.renderer
.symbol('plus', 0, 0, iconSize, iconSize)
.attr({
fill: 'blue',
stroke: 'black',
'stroke-width': 1
})
.add()
.toFront()
.hide();
passing X and Y location dyanmaic
this.iConobject.plusIcon
.attr({
x: normalizedEvent.chartX - iconSize / 2,
y: myObj.highChart.plotTop - iconSize / 2
})
.show()

Here you have one in plain SVG. I don't know if it is useful in your case.
#map {
width: 400px;
height: 400px;
position: relative;
margin: 10px;
border: thin solid black;
}
.point {
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMCAzMCI+CiAgPGRlZnM+CiAgICA8bWFzayBpZD0ibTEiPgogICAgICA8cGF0aCBkPSJNIDIwLDEwIEMgMjAsMTUgMTAsMzAgMTAsMzAgMTAsMzAgMCwxNSAwLDEwIDAsNSA1LDAgMTAsMCAxNSwwIDIwLDUgMjAsMTAgWiIgZmlsbD0id2hpdGUiIC8+CiAgICAgIDxsaW5lIHgxPSIxMCIgeTE9IjUiIHgyPSIxMCIgeTI9IjE1IiBzdHJva2Utd2lkdGg9IjIuNSIgc3Ryb2tlPSJibGFjayIvPgogICAgICA8bGluZSB4MT0iNSIgeTE9IjEwIiB4Mj0iMTUiIHkyPSIxMCIgc3Ryb2tlLXdpZHRoPSIyLjUiIHN0cm9rZT0iYmxhY2siLz4KICAgIDwvbWFzaz4KICA8L2RlZnM+CiAgPHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjMwIiBmaWxsPSJncmF5IiBtYXNrPSJ1cmwoI20xKSIvPgo8L3N2Zz4=');
background-repeat: no-repeat;
position: absolute;
width: 20px;
height: 30px;
}
<p>The basic icon:</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 30" width="100" height="150">
<defs>
<mask id="m1">
<path d="M 20,10 C 20,15 10,30 10,30 10,30 0,15 0,10 0,5 5,0 10,0 15,0 20,5 20,10 Z" fill="white" />
<line x1="10" y1="5" x2="10" y2="15" stroke-width="2.5" stroke="black"/>
<line x1="5" y1="10" x2="15" y2="10" stroke-width="2.5" stroke="black"/>
</mask>
</defs>
<rect width="20" height="30" fill="gray" mask="url(#m1)"/>
</svg>
<p>A "map":</p>
<div id="map">
<span class="point" style="left:100px;top:50px"></span>
<span class="point" style="left:200px;top:100px"></span>
</div>

Related

Re-Center text position as str length changes

I am new to javascript and am having an issue repositioning animated text as the string length varies. I have an SVG element and a string within it, where that string needs to be centered within that SVG. Using ' | ' as a center reference, the centering would look like:
| | |
g g g g g g
If I start the animation with a str of len 3, it will be centered properly for Len 3 strs, but then other lens would be equivalent to:
| |
g g g
Example code:
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
const str = obj.innerHTML;
// console.log(`${str.length}` );
if (`${str.length}`==="1"){
obj.style.x = '200px';
}
obj.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
const obj = document.getElementById("heading");
animateValue(obj, 100, 0, 5000);
svg {
position: absolute ;
width: 40%;
border: 1px solid rgba(255,255,255,0.3);
margin-left: 30%;
border-radius: 50%;
}
#roseline, #majline {
stroke: #eee;
stroke-width: .5;
}
text {
font-family: Montserrat, sans-serif;
font-size: 10;
fill: #eee;
}
text.heading1{
font-size:4.5em;
fill: #0ee;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" id="compassrose">
<defs>
<symbol>
<line x1="40" y1="250" x2="50" y2="250" id="roseline" />
<line x1="40" y1="250" x2="60" y2="250" id="majline" />
<path d="M10,250a240,240 0 1,0 480,0a240,240 0 1,0 -480,0" id="rosecircle" transform='rotate(90 250 250)' />
</symbol>
</defs>
<div class="triangle-container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" id="compassrose">
<polygon points="250,40 280,0 220,000" class="triangle" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" >
<polygon points="0,260 0,220 40,240" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 500 500" >
<polygon points="500,260 500,220 460,240" />
<text class="heading1" id="heading" x='190px' y='250px'
fontSize="36">100 </text>
</svg>
</div>
</svg>
I have tried re-arranging the divs to allow for the absolute and relative positioning, however that was not properly maintaining size relationships as needed.
If you use dominant-baseline="middle" text-anchor="middle" on the text element and position it in the middle of the SVG (250,250) it should work.
function animateValue(obj, start, end, duration) {
let startTimestamp = null;
const step = (timestamp) => {
if (!startTimestamp) startTimestamp = timestamp;
const progress = Math.min((timestamp - startTimestamp) / duration, 1);
obj.innerHTML = Math.floor(progress * (end - start) + start);
if (progress < 1) {
window.requestAnimationFrame(step);
}
};
window.requestAnimationFrame(step);
}
const obj = document.getElementById("heading");
animateValue(obj, 200, 0, 5000);
svg {
display: block;
position: absolute;
width: 40%;
border: 1px solid rgba(255, 255, 255, .3);
margin-left: 30%;
border-radius: 50%;
}
#roseline,
#majline {
stroke: #eee;
stroke-width: .5;
}
text {
font-family: Montserrat, sans-serif;
font-size: 10;
fill: #eee;
}
text.heading1 {
fill: #0ee;
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500" id="compassrose">
<defs>
<symbol>
<line x1="40" y1="250" x2="50" y2="250" id="roseline" />
<line x1="40" y1="250" x2="60" y2="250" id="majline" />
<path d="M10,250a240,240 0 1,0 480,0a240,240 0 1,0 -480,0"
id="rosecircle" transform='rotate(90 250 250)' />
</symbol>
</defs>
<polygon points="250,40 280,0 220,000" class="triangle" />
<polygon points="0,260 0,220 40,240" />
<polygon points="500,260 500,220 460,240" />
<text class="heading1" id="heading" x="250" y="250" font-size="60"
dominant-baseline="middle" text-anchor="middle">100</text>
</svg>

SVG Linear Gradient SVG Background

I am trying to use an SVG, which will be dynamically created from JavaScript, as the background image on another SVG. This works when the fill color of the object is a solid color, but not when I try to use a linear gradient. Run the code to see an example. Please help figure how to use the linear gradient!
const createElement = (tag, attributes) => {
const element = document.createElement(tag);
if (attributes) Object.keys(attributes).forEach(key => element.setAttribute(key, attributes[key]));
return element;
}
// Create background for first SVG using solid color fill:
const svg3bg = createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 50 50', width: 50, height: 50 });
svg3bg.appendChild(createElement('circle', { cx: 25, cy: 25, r: 20, fill: '#00F' }));
const svg3 = document.getElementById('svg3');
svg3.style.backgroundImage = `url('data:image/svg+xml,${svg3bg.outerHTML.replace(/\#/g, '%23')}')`; // This does not display unless I replace the # signs with a hex code.
svg3.style.backgroundColor = 'palegreen';
// Create background for second SVG using linear gradient fill:
const svg4bg = createElement('svg', { xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 50 50', width: 50, height: 50 });
const lg4 = svg4bg.appendChild(createElement('linearGradient', { id: "lg4" }))
lg4.appendChild(createElement('stop', { offset: "0%", 'stop-color': '#d67ef5' }))
lg4.appendChild(createElement('stop', { offset: "50%", 'stop-color': '#2b78ba' }))
lg4.appendChild(createElement('stop', { offset: "100%", 'stop-color': '#4d79a9' }))
svg4bg.appendChild(createElement('circle', { cx: 25, cy: 25, r: 20, fill: 'url(#lg4)' }));
const svg4 = document.getElementById('svg4');
svg4.style.backgroundImage = `url('data:image/svg+xml,${svg4bg.outerHTML.replace(/\#/g, '%23')}')`;
svg4.style.backgroundColor = 'palegreen';
This shows an SVG using another SVG (generated from JavaScript) of blue dots as its background image:
<div id="div3">
<svg id="svg3" iewBox="0 0 100 100" style="width: 150; height: 150;">
<rect x="10" y="10" width="80" height="80" style="stroke: black; fill: none; stroke-width: 4"></rect>
</svg>
</div><br>
When trying to do the same thing with a linear gradient to fill the object instead of a solid color, it does not
display:
<div id="div4">
<svg id="svg4" iewBox="0 0 100 100" style="width: 150; height: 150;">
<rect x="10" y="10" width="80" height="80" style="stroke: black; fill: none; stroke-width: 4"></rect>
</svg>
</div><br>
This shows what the background image with the linear gradient should look like:
<div id="div5">
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 50 50" width="50" height="50">
<lineargradient id="lg5">
<stop offset="0%" stop-color="#d67ef5"></stop>
<stop offset="50%" stop-color="#2b78ba"></stop>
<stop offset="100%" stop-color="#4d79a9"></stop>
</lineargradient>
<circle cx="25" cy="25" r="20" fill="url(#lg5)"></circle>
</svg>
</div>
Seems OK to me once I correct all the typos.
viewBox is missing a v in some places
units are missing from CSS sizes where they are mandatory
use createElementNS to create SVG elements and use an XML serializer rather than HTML serialization to get namespaces in the output.
while not necessary in this case I've fixed the URI encoding properly rather than using replace
const createElement = (tag, attributes) => {
const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
if (attributes) Object.keys(attributes).forEach(key => element.setAttribute(key, attributes[key]));
return element;
}
let s = new XMLSerializer();
// Create background for first SVG using solid color fill:
const svg3bg = createElement('svg', { viewBox: '0 0 50 50', width: 50, height: 50 });
svg3bg.appendChild(createElement('circle', { cx: 25, cy: 25, r: 20, fill: '#00F' }));
const svg3 = document.getElementById('svg3');
svg3.style.backgroundImage = `url('data:image/svg+xml,${encodeURIComponent(s.serializeToString(svg3bg))}')`;
svg3.style.backgroundColor = 'palegreen';
// Create background for second SVG using linear gradient fill:
const svg4bg = createElement('svg', { viewBox: '0 0 50 50', width: 50, height: 50 });
const lg4 = svg4bg.appendChild(createElement('linearGradient', { id: "lg4" }))
lg4.appendChild(createElement('stop', { offset: "0%", 'stop-color': '#d67ef5' }))
lg4.appendChild(createElement('stop', { offset: "50%", 'stop-color': '#2b78ba' }))
lg4.appendChild(createElement('stop', { offset: "100%", 'stop-color': '#4d79a9' }))
svg4bg.appendChild(createElement('circle', { cx: 25, cy: 25, r: 20, fill: 'url(#lg4)' }));
const svg4 = document.getElementById('svg4');
svg4.style.backgroundImage = `url('data:image/svg+xml,${encodeURIComponent(s.serializeToString(svg4bg))}')`;
svg4.style.backgroundColor = 'palegreen';
This shows an SVG using another SVG (generated from JavaScript) of blue dots as its background image:
<div id="div3">
<svg id="svg3" viewBox="0 0 100 100" style="width: 150px; height: 150px;">
<rect x="10" y="10" width="80" height="80" style="stroke: black; fill: none; stroke-width: 4"></rect>
</svg>
</div><br>
When trying to do the same thing with a linear gradient to fill the object instead of a solid color, it does not
display:
<div id="div4">
<svg id="svg4" viewBox="0 0 100 100" style="width: 150px; height: 150px;">
<rect x="10" y="10" width="80" height="80" style="stroke: black; fill: none; stroke-width: 4"></rect>
</svg>
</div><br>
This shows what the background image with the linear gradient should look like:
<div id="div5">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50">
<linearGradient id="lg5">
<stop offset="0%" stop-color="#d67ef5"></stop>
<stop offset="50%" stop-color="#2b78ba"></stop>
<stop offset="100%" stop-color="#4d79a9"></stop>
</linearGradient>
<circle cx="25" cy="25" r="20" fill="url(#lg5)"></circle>
</svg>
</div>

Create a gauge chart in svg or css

I need to implement a chart that looks like this.
https://i.stack.imgur.com/jSIUp.png
I tried using in svg but I'm not able to achieve what I've needed. The code I've used is the following:
svg {
height: 90vh;
margin: auto;
display: block;
}
path.purple {
stroke: url(#gradient);
stroke-dasharray: 282;
stroke-dashoffset: 282;
animation: dash 5s linear forwards;
}
#keyframes dash {
to {
stroke-dashoffset: 0;
}
}
<svg style="fill:none; stroke:#81125A" width="400" height="400">
<linearGradient id="gradient" x1="0" y1="0" x2="0" y2="100%">
<stop offset="0%" stop-color="#81125A" />
<stop offset="100%" stop-color="#81125A" />
</linearGradient>
<path d=" M 124.58399310102934 183.5 A 79 75 0 0 1 118.30403252765396 121.58238841571327"stroke="#e7e7e8" stroke-dasharray="65,65"></path>
<path d=" M 123.90504313598774 109.6392784815247 A 79 75 0 0 1 198.51076142578597 71.18269623051319" stroke="#e7e7e8" stroke-dasharray="90, 90"></path>
<path d=" M 212.11182975237372 73.22782052930026 A 79 75 0 0 1 267.2357170420868 120.34848925057486" stroke="#e7e7e8" stroke-dasharray="75, 75"></path>
<path d=" M 270.79981248796446 132.97638667498023 A 79 75 0 0 1 259.99579959635764 185.74394481749036" stroke="#e7e7e8" stroke-dasharray="60,60"></path>
</svg>
Any help is greatly appreciated!
Does it have to look exactly like that? You can get a pretty quick version with ChartJS.
const ctx = document.getElementById("chart");
new Chart(ctx, {
type: "doughnut",
data: {
datasets: [{
data: [700, 200],
backgroundColor: ["rgb(133, 13, 123)", "rgb(235, 235, 235)"]
}, ],
},
options: {
rotation: Math.PI + 50,
circumference: Math.PI + 0.5,
cutoutPercentage: 90
},
});
#container {
position: relative;
width: 300px;
height: 300px;
margin-top: -50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<div id="container">
<canvas id="chart" width="100%" height="100%"></canvas>
</div>

Javscript to dynamically build HTML/SVG for mobile view

I have a full screen SVG image/mask reveal; it works great on desktop but it doesn't scale/fit on mobile devices. So im guessing the best solution would be to dynamically build the SVG and SVG container depending on screen width and have a mobile & desktop build. So i'm looking for advice and the best solution and if someone could point me in the right direction or know of an example I can look at.
// DRAW SVG MASK /////////////////////////////
var svg = document.querySelector("#svg__bg");
var tl = new gsap.timeline({ onUpdate: onUpdate });
var pt = svg.createSVGPoint();
var ratio = 0.5625;
tl.to("#masker", {duration: 2, attr: {r: 2400}, ease: "power2.in" });
tl.reversed(true);
function mouseHandler() {
tl.reversed(!tl.reversed());
}
function getPoint(evt) {
pt.x = evt.clientX;
pt.y = evt.clientY;
return pt.matrixTransform(svg.getScreenCTM().inverse());
}
function mouseMove(evt) {
var newPoint = getPoint(evt);
gsap.set("#dot", { cx: newPoint.x, cy: newPoint.y });
gsap.to("#ring, #masker", {duration: 0.88, attr: { cx: newPoint.x, cy: newPoint.y }, ease: "power2.out" });
}
function onUpdate() {
var prog = (tl.progress() * 100);
}
function newSize() {
var w = window.innerWidth;
var h = window.innerHeight;
if (w > h * (16 / 9)) {
gsap.set("#svg__bg", { attr: { width: w, height: w * ratio } });
} else {
gsap.set("#svg__bg", {
attr: {
width: h / ratio,
height: h
}
});
}
var data = svg.getBoundingClientRect();
gsap.set("#svg__bg", {
x: w / 2 - data.width / 2
});
gsap.set("#svg__bg", {
y: h / 2 - data.height / 2
});
}
window.addEventListener("mousedown", mouseHandler);
window.addEventListener("mouseup", mouseHandler);
window.addEventListener("mousemove", mouseMove);
newSize();
window.addEventListener("resize", newSize);
#import url('https://fonts.googleapis.com/css?family=Montserrat:700&display=swap');
body {
min-height: 100vh;
background-color: #1F242D;
cursor: none;
overflow: hidden;
font-family: 'Montserrat', sans-serif;
}
.intro-svg {
position: relative;
padding: 0;
margin: 0;
width: 100%;
min-height: 100vh;
height: calc(var(--vh, 1vh) * 100);
overflow: hidden;
z-index: 1;
}
.svg__container {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
}
.svg__image {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: none;
}
.text-svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
cursor: none;
z-index:2;
}
.impact-text {
font-size: 7em;
line-height: 1.2;
text-transform: uppercase;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
<div class="intro-svg">
<div class="svg__container">
<svg id="svg__bg" class="svg__image" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="1600" height="900" viewBox="0 0 1600 900">
<defs>
<radialGradient id="mask-gradient">
<stop offset="80%" stop-color="#fff"/><stop offset="100%" stop-color="#000" />
</radialGradient>
<mask id="the-mask">
<circle id="masker" r="250" fill="url(#mask-gradient)" cx="800" cy="450">
</circle>
</mask>
<mask id="mask-text" width="100" height="100" x="0" y="0">
<text id="masker" class="impact-text row-1" fill="none" stroke="#fff" stroke-width="3" x="10.1%" y="42%">A</text>
<text id="masker" class="impact-text row-2" fill="white" x="10%" y="55%">Digital</text>
<text id="masker" class="impact-text row-3" fill="white" x="10%" y="68%">Designer</text>
</mask>
</defs>
<image id="lines" xlink:href="https://i.imgur.com/1TQRj56.jpg" x="0" y="0" width="1600" height="900" />
<g id="mask-reveal" mask="url(#the-mask)">
<image id="regular" xlink:href="https://i.imgur.com/7VtEKv3.jpg" x="0" y="0" width="1600" height="900" />
</g>
<g mask="url(#mask-text)">
<image id="text-before" xlink:href="https://i.imgur.com/7VtEKv3.jpg" x="0" y="0" width="1600" height="900" />
</g>
<circle id="ring" r="20" fill="none" stroke="#D74A53" stroke-width="2" cx="800" cy="450" />
<circle id="dot" r="4" fill="#D74A53" cx="800" cy="450"/>
</svg>
</div>
</div>
just add
#svg__bg {
width: 100%;
height:auto;
}
andchange them with media query
don't forget to change
<svg id="svg__bg" class="svg__image" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 1600 900">
without width="1600" height="900"

I want to place boxes of text and images on the corners of the path. How to do that?

I have defined a path over which a red dot moves on scrolling up and down. I want to place boxes of text and images on the corners of the path. So how do I go about doing that?
function positionTheDot() {
// What percentage down the page are we?
var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
// Get path length
var path = document.getElementById("theMotionPath");
var pathLen = path.getTotalLength();
// Get the position of a point at <scrollPercentage> along the path.
var pt = path.getPointAtLength(scrollPercentage * pathLen);
// Position the red dot at this point
var dot = document.getElementById("dot");
dot.setAttribute("transform", "translate(" + pt.x + "," + pt.y + ")");
};
// Update dot position when we get a scroll event.
window.addEventListener("scroll", positionTheDot);
// Set the initial position of the dot.
positionTheDot();
.verylong {
height: 2000px;
}
svg {
width: 1000px;
height: 1000px;
align: center;
}
body {
background-color: #333333;
}
h1 {
color: red;
font-size: 50px;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
<svg viewBox="0 0 820 820" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10 10 H 600 V 500 H 10 L 10 10" stroke="#d3d3d3" stroke-width="5" fill="none" id="theMotionPath"/>
<!--<circle cx="10" cy="110" r="3" fill="#000"/> <!--The bottom grey dot-->
<!-- <circle cx="110" cy="10" r="3" fill="#000"/> <!--The top grey dot-->
<!-- Red circle which will be moved along the motion path. -->
<circle cx="0" cy="0" r="5" fill="red" id="dot"/>
</svg>
<div class="verylong">
</div>
This is what I tried to do by adding div, I had added cx and cy in div but that didn't help.
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<svg viewBox="0 0 120 120">
<svg viewBox="0 0 820 820" xmlns="http://www.w3.org/2000/svg"
version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M10 10 H 600 V 500 H 10 L 10 10" stroke="#d3d3d3" stroke-
width="5" fill="none" id="theMotionPath"/>
<!-- Red circle which will be moved along the motion path. -->
<circle cx="0" cy="0" r="5" fill="red" id="dot"/>
<div>This text is the actual content of the box.</div>
</svg>

Categories