With a SVG with lines and points like this:
svg line { stroke: black; stroke-width: 2px; }
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" id="svg">
<circle id="1a" cx="20" cy="20" r="3"></circle><circle id="1b" cx="20" cy="120" r="3"></circle><line id="1c" x1="20" y1="20" x2="20" y2="120"></line>
<circle id="2a" cx="20" cy="120" r="3"></circle><circle id="2b" cx="60" cy="80" r="3"></circle><line id="2c" x1="20" y1="120" x2="60" y2="80"></line>
<circle id="3a" cx="60" cy="80" r="3"></circle><circle id="3b" cx="100" cy="120" r="3"></circle><line id="3c" x1="60" y1="80" x2="100" y2="120"></line>
<circle id="4a" cx="100" cy="120" r="3"></circle><circle id="4b" cx="140" cy="100" r="3"></circle><line id="4c" x1="100" y1="120" x2="140" y2="100"></line>
<circle id="5a" cx="140" cy="100" r="3"></circle><circle id="5b" cx="100" cy="20" r="3"></circle><line id="5c" x1="140" y1="100" x2="100" y2="20"></line>
</svg>
is there a way with a HTML <svg> to be able to click and drag to select points? So that we can then mouse drag to move these points?
Before re-inventing the wheel, are there ways to do this directly with a <svg>?
For example, how to use the Drag and Drop API (see https://coursesweb.net/javascript/drag-drop-html5-attributes_t) to achieve this:
<tag draggable='true' ondragstart='handler(event)' id='draggable_elm'>Content</tag>
for SVG elements?
Java script -
I am trying to do this task to get into coding but it's getting a bit confusing
My HTML:
<svg height="400" width="400">
<circle cx="205" cy="203" r="150" fill="black" />
<circle cx="200" cy="200" r="150" fill="#FFCE54"/>
<circle cx="150" cy="160" r="43" fill="black" />
<circle cx="150" cy="160" r="40" fill="white" />
<circle cx="250" cy="160" r="43" fill="black" />
<circle cx="250" cy="160" r="40" fill="white" />
<circle cx="150" cy="160" r="20" fill="black"/>
<circle cx="250" cy="160" r="20" fill="black"/>
<circle cx="145" cy="154" r="5" fill="white"/>
<circle cx="245" cy="154" r="5" fill="white"/>
<path d="M 135.5,260 q 65,45 130,0"
stroke="red" stroke-width="12" fill-opacity="0" />
id="mouth"/>
</svg>
My Javascript code:
faceShape.onclick = function(){
faceShape.setAttribute("fill", "#A0D468");
};
The problem is that when I run the code, I get this error -> Uncaught TypeError: Cannot set property 'onclick' of null"
Please help. Am I doing something wrong?
faceShape does not appear anywhere in your markup. I am guessing based on what you provided that you want to add an id="faceShape" to your <circle> elements or something similar. The error message is saying that there is nothing assigned to faceShape that is why it can't read any property of null.
<svg height="400" width="400">
<circle cx="205" cy="203" r="150" fill="black" />
<circle id="faceShape" cx="200" cy="200" r="150" fill="#FFCE54"/> //added id
<circle cx="150" cy="160" r="43" fill="black" />
<circle cx="150" cy="160" r="40" fill="white" />
<circle cx="250" cy="160" r="43" fill="black" />
<circle cx="250" cy="160" r="40" fill="white" />
<circle cx="150" cy="160" r="20" fill="black"/>
<circle cx="250" cy="160" r="20" fill="black"/>
<circle cx="145" cy="154" r="5" fill="white"/>
<circle cx="245" cy="154" r="5" fill="white"/>
<path d="M 135.5,260 q 65,45 130,0"
stroke="red" stroke-width="12" fill-opacity="0" />
id="mouth"/>
</svg>
I fully changed your javascript to make the click work:
document.getElementById("faceShape").addEventListener("click", change);
function change() {
document.getElementById("faceShape").setAttribute("fill", "#A0D468")
};
Here is a working jsfiddle of what I think you're trying to accomplish: https://jsfiddle.net/g0k5joxq/1/
If not then you can use the code to extrapolate to your circumstances.
I have a dynamically generated SVG string in a React component. I want to embed this as an image in the component. Currently, I'm using something along the lines of:
class SomeComponent extends React.Component {
render() {
var image = '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>';
return (
<div dangerouslySetInnerHTML={{ __html: image }} />
)
}
}
However using a property called dangerouslySetInnerHTML makes me pretty uneasy. Is there a more generally accepted (and safer) way to do this?
Since the SVG is dynamically generated and you can't store it as an asset, as an alternative to dangerouslySetInnerHTML, you could simply set it as a Data URI on the image. So something like...
class SomeComponent extends React.Component {
render() {
const image = '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>';
return (
<div>
<img src={`data:image/svg+xml;utf8,${image}`} />
</div>
)
}
}
See post here: https://css-tricks.com/lodge/svg/09-svg-data-uris/
One thing you can do is to convert your svg string to base64 and then use it like this:
const image = '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>';
const buff = new Buffer(image);
const base64data = buff.toString('base64');
return <img src='data:image/svg+xml;base64,${base64data }' alt="" />
if you don't want to use buffer, use this:
const base64data = btoa(unescape(encodeURIComponent(image)));
Simply use this package: https://github.com/gilbarbara/react-inlinesvg
Example:
import SVG from 'react-inlinesvg';
...
const mySVG = '<svg xmlns="http://www.w3.org/2000/svg">...</svg>';
return <SVG src={mySVG} />;
React ref with innerHTML works quite well and is clean.
var image = '<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>';
const useApp = () => {
const svgWrapperRef = React.useRef();
React.useEffect(() => {
svgWrapperRef.current.innerHTML = image;
}, [])
return {
svgWrapperRef
}
}
const App = () => {
const {svgWrapperRef} = useApp()
return (
<div ref={svgWrapperRef}></div>
)
}
const root = document.getElementById('root')
ReactDOM.render(<App />, root)
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="root"></div>
Good Luck...
In this way, I succeeded.
const svgStr = "<svg></svg>";
const svg = new Blob([svgStr], { type: "image/svg+xml" });
const url = URL.createObjectURL(svg);
<img src={url} />
I know the question is about the string of a svg object, But you can also use the svg object directly.
import React from 'react';
function CustomSvgObject({ }) {
return <svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" ></circle></g></svg>
}
You can also change the className or color of the svg elements like:
import React from 'react';
function CustomSvgObject({ className, color }) {
return <svg className={className} xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke={color} fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke={color} fill={color} ></path><g transform="translate(0,0)" stroke-width="4" stroke={color} fill="none" ><circle cx="100" cy="30" r="7.5" fill={color} ></circle><circle cx="70" cy="30" r="7.5" fill={color} ></circle><circle cx="130" cy="30" r="7.5" fill={color} ></circle></g></svg>
}
I would store the svg image in a separate folder(assets), and import the image into the react component
Something like this:
SomeComponent.js:
import { SampleImage } from '../assets/SomeFile';
class SomeComponent extends React.Component {
render() {
return (
<div>
<img src={SampleImage} />
<div/>
)
}
}
SomeFile.svg:
<?xmlns="http://www.w3.org/2000/svg" version="1.2"encoding="UTF-8"?>
<svg baseProfile="tiny" width="47.4" height="40.65" viewBox="21 18.5 158 135.5"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><circle cx="100" cy="30" r="7.5" fill="black" ></circle><circle cx="70" cy="30" r="7.5" fill="black" ></circle><circle cx="130" cy="30" r="7.5" fill="black" >
</circle></g>
</svg>
I am trying to convert an svg graph to a png image. To do so, I am first converting my svg graph to a canvas using the library 'canvg', and then I use the method canvas.toDataURL('image/png') to finally convert my graph into a png image. The reason why I am using the library 'canvg' is because I needed my code to work on ie9 and I couldn't find another way around, although I haven't tested on it yet.
All seems to work perfectly until I get the result, when I have noticed that all my paths are thicker than in the initial svg graph. So, trying to find out what I was doing wrong, I start doing small tests on http://canvg.github.io/canvg/examples/index.htm. It is then when I noticed that if I do not set the attribute fill to none either inline or in a css file then the path is thicker than one pixel. As my svg graph have some of the styles in a separate css file, I tried to flatten them (I took the idea from Convert embedded SVG to PNG in-place):
function flatten_svg_element_css(target){
if (target.nodeType != Node.TEXT_NODE) {
var cssStyle = window.getComputedStyle(target);
if (cssStyle) {
var fillStyle = '';
if( cssStyle.getPropertyValue('fill') == 'none' && cssTyle.getPropertyValue('stroke') == 'rgb(0, 0, 0)'){
fillStyle = 'fill:none; stroke:rgb(0, 0, 0);';
}
target.style.cssText = fillStyle + cssStyle.cssText;
}
}
}
function flatten_svg_css(target) {
for (var i = 0; i < target.childNodes.length; i++) {
var child = target.childNodes[i];
if (child.childNodes != null && child.childNodes.length > 0) {
flatten_svg_css(child);
}
else{
flatten_svg_element_css(child);
}
}
}
But it seems that it never gets into the condition cssStyle.getPropertyValue('fill') == 'none' && cssTyle.getPropertyValue('stroke') == 'rgb(0, 0, 0).
When the target is a path, the function getPropertyValue('fill') returns rgb(0, 0, 0) instead of none. But if I test directly the element with Firebug window.getComputedStyle(d3.select('.domain').node()).getPropertyValue('fill'), I got the value to none.
This is the svg graph that I am trying to convert to a png image. The graph has been generated using the library 'dc.js':
<svg width="1166" height="317">
<g>
<g class="grid-line horizontal" transform="translate(50,10)">
<line x1="1" y1="265" x2="1066" y2="265" opacity="0" />
<line x1="1" y1="239" x2="1066" y2="239" opacity="0" />
<line x1="1" y1="212" x2="1066" y2="212" opacity="0" />
<line x1="1" y1="186" x2="1066" y2="186" opacity="0" />
<line x1="1" y1="159" x2="1066" y2="159" opacity="0" />
<line x1="1" y1="133" x2="1066" y2="133" opacity="0" />
<line x1="1" y1="106" x2="1066" y2="106" opacity="0" />
<line x1="1" y1="80" x2="1066" y2="80" opacity="0" />
<line x1="1" y1="53" x2="1066" y2="53" opacity="0" />
<line x1="1" y1="27" x2="1066" y2="27" opacity="0" />
<line x1="1" y1="0" x2="1066" y2="0" opacity="0" />
</g>
<g class="chart-body" transform="translate(50, 10)"
clip-path="url(http://127.0.0.1:1234/index.jsp?gwt.codesvr=127.0.0.1:9997#analysis_charts_first_chart-clip)">
<g class="stack _0">
<rect class="bar" fill="#1f77b4" y="133" height="132" width="532"
x="1">
<title>ds1 - missing: 50%</title>
</rect>
<rect class="bar" fill="#1f77b4" y="133" height="132" width="532"
x="534">
<title>ds3 - missing: 50%</title>
</rect>
</g>
<g class="stack _1">
<rect class="bar" fill="#ffbb78" y="87" height="46" width="532"
x="1">
<title>ds1 - something else: 17%</title>
</rect>
<rect class="bar" fill="#ffbb78" y="133" height="0" width="532"
x="534">
<title>ds3 - something else: 0%</title>
</rect>
</g>
<g class="stack _2">
<rect class="bar" fill="#aec7e8" y="0" height="87" width="532"
x="1">
<title>ds1 - total: 33%</title>
</rect>
<rect class="bar" fill="#aec7e8" y="0" height="133" width="532"
x="534">
<title>ds3 - total: 50%</title>
</rect>
</g>
</g>
<g class="axis x" transform="translate(50,275)">
<g class="tick" style="opacity: 1;" transform="translate(266.5,0)">
<line y2="6" x2="0" />
<text dy=".71em" style="text-anchor: middle;" y="9" x="0">ds1
</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(799.5,0)">
<line y2="6" x2="0" />
<text dy=".71em" style="text-anchor: middle;" y="9" x="0">ds3
</text>
</g>
<path class="domain" d="M0,6V0H1066V6" />
</g>
<text class="x-axis-label" transform="translate(583,305)"
text-anchor="middle">Datasets</text>
<g class="axis y" transform="translate(50,10)">
<g class="tick" style="opacity: 1;" transform="translate(0,265)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">0%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,239)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">10%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,212)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">20%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,186)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">30%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,159)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">40%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,133)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">50%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,106)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">60%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,80)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">70%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,53)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">80%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,27)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">90%</text>
</g>
<g class="tick" style="opacity: 1;" transform="translate(0,0)">
<line x2="-6" y2="0" />
<text dy=".32em" style="text-anchor: end;" x="-9" y="0">100%</text>
</g>
<path class="domain" d="M-6,0H0V265H-6" />
</g>
<text transform="translate(12,142.5),rotate(-90)" class="y-axis-label y-label"
text-anchor="middle">Data Quality</text>
</g>
<defs>
<clipPath id="analysis_charts_first_chart-clip">
<rect width="1066" height="265" transform="translate(-0, -0)" />
</clipPath>
</defs>
</svg>
So I guess I am doing something wrong when trying to flatten the styles recursively.
I am using an inline SVG in an SVG and have set some default x and y values. When I change them, the inline SVG moves accordingly. I am trying to change it with
var inlineSVG = document.getElementById("inlineSVG");
inlineSVG.style.x = "90";
and that adds style="x:90px;" but that doesn't actually affect the element.
It's weird (in my head) because this works with a rect but not with an svg.
Here is my actual code:
<?xml version='1.0' encoding='UTF-8'?>
<svg width='1000' height='360'
xmlns='http://www.w3.org/2000/svg'
xmlns:xlink="http://www.w3.org/1999/xlink"
onload='init(evt)'
>
<script type='text/ecmascript'>
function init(event){
var wing1 = document.getElementById("wing1");
wing1.style.x = "90";
}
</script>
<circle cx="200" cy="140" r="5" fill="red" />
<circle cx="220" cy="170" r="5" fill="red" />
<circle cx="180" cy="170" r="5" fill="red" />
<circle cx="220" cy="220" r="5" fill="red" />
<circle cx="180" cy="220" r="5" fill="red" />
<svg id="wing1" x="280" y="100" viewBox="0 0 350 300">
<g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.505" cy="117.813" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.931" cy="117.819" rx="5.862" ry="4.547"/>
</g>
</g>
<g>
<g>
<ellipse fill="#E6E7E8" cx="229.191" cy="125.538" rx="5.862" ry="4.547"/>
</g>
<g>
<ellipse fill="#E6E7E8" cx="265.617" cy="125.531" rx="5.861" ry="4.547"/>
</g>
</g>
</g>
<ellipse fill="#E6E7E8" cx="247.244" cy="121.796" rx="20.635" ry="38.017"/>
</svg>
<rect id="square" x="0" y="470" width="50" height="50" fill="#BADA55" style="fill-opacity : 0.5" />
<line x1="0" y1="0" x2="1000" y2="360" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>
<line x1="0" y1="360" x2="1000" y2="0" style="stroke: yellowgreen;
stroke-width: 1;
stroke-dasharray: 10 1;"></line>
I tried adding !important to the value but it didn't work ( because I guess it doesn't count it as a valid number? ).
The solution is to directly change the x attribute like so:
selector.setAttribute("attr",val);