Hello I need a circle that is created when you click on a free area to be able to move freely throughout the page when the Shift+Left button Mouse is pressed.
Simply put I need to be able to move this circle around the entire page area while holding down Shift+Left button Mouse.
Before trying to respond run the code and click on an empty area.
let svg = document.querySelector("svg")
let bg = document.querySelector("svg rect")
function click(e) {
svg.innerHTML += `
<g transform="translate(${e.clientX},${e.clientY})">
<circle onclick="split(this)" r="50"></circle>
</g>
`;
}
function split(el){
el.parentNode.innerHTML = [...Array(4)].map((_,i) => `
<path d="M-50,0A50,50,0,0,0,0,50L0,0z"
onclick=merge(this)
transform="rotate(${-45+i*90})"></path>
`);
}
function merge(el){
el.parentNode.innerHTML = `<circle onclick="split(this)" r="50"></circle>`;
}
function resize() {
svg.setAttribute("viewBox", [0, 0, innerWidth, innerHeight]);
}
resize();
addEventListener("resize", resize);
body{
margin: 0;
overflow: hidden
}
path, circle {
transition: 100ms;
fill: #0001;
stroke: black;
}
path:hover, circle:hover {
fill: rgba(15, 250, 113, 0.133);
}
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>Redactor marshrutov</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="menu1.css">
</head>
<body>
<svg>
<rect fill="white" width="1440" height="900" onclick="click(event)"></rect>
</svg>
<script type="text/javascript" src="menu1.js"></script>
</body>
</html>
I am new to javascript and I am having a problem when linking the .js file to the .html one. It is working fine in codepen, but when i implement it in visual code studio, the text on hover doesn't show. I linked the .js file with the general syntax "https://codepen.io/przemoo83/pen/vJPvmy
Ps: I want to use javascript for the tooltip "text on hover" so that i could later on be able to update that data through a channel. Do you think that it is a good idea, or could i just use css and still be able to update it later on ? or will i need to use php, since the data is coming from a server?
Thank you guys
It seems that perhaps you have simply failed to include all the right imports in your local HTML file, or perhaps put them in the wrong order or in the wrong place in the file.
I have set it up as the following and if you use this it should be fine. Just make sure you have all the external resources mentioned in your HTML, so that means bootstrap.min.css for CSS, and jquery.min.js and bootstrap.min.js in that order. Bootstrap needs jQuery to be loaded first for it to run. And then your own linked or embedded JS should be third, as this is referencing both.
If you look in your browser's Developer window (press F12 for Chrome) it will show you any error messages that will help you to fix problems.
$(document).ready(function(){
$('.path').tooltip({container:'.img-container'});
});
.img-container {
width: 50%;
margin: 0 auto;
}
path {
fill: transparent;
transition: 1s;
stroke: transparent;
stroke-width: 2px;
opacity: 1;
}
#screen:hover {
fill: red;
}
#one:hover {
stroke: green;
}
#two:hover {
fill: blue;
stroke: yellow
}
#three:hover {
fill: grey;
opacity: 0.5
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>z</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
<link rel='stylesheet' href="/mysite/static/.other/z.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='/mysite/static/.other/z.js'></script>
</head>
<body>
<div class="img-container">
<svg viewBox="0 0 960 714" height="100%" width="100%" version="1.1" id="svg4160">
<image width="960" height="714" preserveAspectRatio="none" xlink:href="http://i68.tinypic.com/apa4x0.png" id="" />
<path class="path" id="screen" data-placement="top" title="Screen!" d="m 303.80326,47.378347 263.07451,144.628633 0.41559,3.3248 -187.85098,154.18743 -6.6496,1.6624 -265.5681,-174.96741 z" />
<path id="one" class="path" data-placement="top" title="One!" d="m 511.81083,476.48487 32.00116,22.44237 10.80559,7.68859 4.57159,1.039 2.078,-1.4546 67.11933,-60.05413 1.039,-2.4936 -16.00059,-12.26018 -27.01397,-16.41619 -2.07799,-1.24679 -1.2468,0.4156 -22.85798,19.74097 -47.79394,39.48196 z" />
<path class="path" id="two" data-toggle="tooltip" data-placement="top" title="Two!" d="m 589.52794,411.23574 29.09197,17.66298 13.50698,11.01339 3.3248,0 77.71711,-78.34052 -1.039,-2.70139 -14.54598,-9.76659 -25.14377,-14.54599 -4.3638,-1.45459 -2.70139,2.07799 -76.67812,73.56112 1.4546,2.2858 z" />
<path class="path" id="three" data-placement="top" title="Three!" d="m 670.77765,331.23283 29.50757,15.37718 13.09138,9.97439 4.5716,0.4156 47.58614,-53.61234 0.8312,-3.117 -13.71478,-8.10419 -30.54657,-16.41618 -1.4546,0.8312 -48.41734,51.74214 z" />
</svg>
</div>
</body>
</html>
INDEX.HTML
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
width: 960px;
padding-top: 40px;
margin: auto;
position: relative;
}
svg {
width: 100%;
max-height: 400px;
}
</style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type='text/javascript'>
window.addEventListener('load', function () {
d3.xml('iPhone.svg', 'image/svg+xml', function (error, data) {
d3.select('body').node().appendChild(data.documentElement);
var svg = d3.select('svg');
var appScreen = svg.select('#ScreenBackground');
var screenWidth = +appScreen.attr('width'),
screenHeight = +appScreen.attr('height');
var appButton = svg.select('#AppButton')
.on('mouseenter', function () {
appButton.style('fill', '#AB69C6');
})
.on('mouseleave', function () {
appButton.style('fill', '#9B59B6')
})
.on('click', function () {
var x = Math.random() * screenWidth;
var y = Math.random() * screenHeight;
appButton
.transition()
.duration(1000)
.ease('bounce')
.attr('cx', x)
.attr('cy', y);
});
});
});
</script>
iPhone.svg
<?xml version='1.0' encoding='utf-8'?>
<svg width='400px' height='800px' viewBox='0 0 400 800'
version='1.1' xmlns='http://www.w3.org/2000/svg'>
<title> SafeSignal </title>
<description>Created with Sketch (http:/ / www.bohemiancoding.com / sketch) </description>
<defs>
<!-- Define a clipping path the size of the screen -->
</defs>
<!-- iPhone frame -->
<rect id='iPhone' fill='#000000'
x='0' y='0' width='400' height='800' rx='50' ry='50'></rect>
<!-- iPhone home button -->
<circle id='HomeButton' fill='#202020'
cx='200' cy='730' r='40'></circle>
<!-- Apply the clipping path to the screen group -->
<g id='ScreenGroup' transform='translate(20, 80)'
clip-path='url(#ScreenMask)'>
<!-- Screen background -->
<rect id = "ScreenBackground" x ="214" y ="0" width ="102" height ="568" style = "pointer-events: all;" ></rect>
<!-- An interactive button in the app -->
<circle id='AppButton' fill='#9B59B6' cx='180' cy='290' r='50' style='cursor:pointer;'></circle>
</g>
</svg>
taking help from the google , i have made this SVG . now I am trying to make have background as image but i have tried all the ways but everytime i done this ya add any image I have get this error Uncaught TypeError: Cannot read property 'documentElement' of null I dont know where i am going wrong because i am new to this svg
<object type="image/svg+xml"
width="100" height="100" style="float:right"
data="http://blog.codedread.com/clipart/apple.svgz">
<span/></object>
<object id="E" type="image/svg+xml" data="http://srufaculty.sru.edu/david.dailey/svg/ovals.svg" width="320" height="240">
alt : Your browser has no SVG support. Please install Adobe SVG Viewer
plugin (for Internet Explorer) or use Firefox, Opera or Safari instead.
</object>
<!DOCTYPE html>
<html>
<head>
<title>HTML5 SVG demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>HTML5 SVG Demo (embed with iframe)</h1>
<p> A nice green circle that was embeded using the HTML "iframe" tag:
<iframe src="green-circle.svg"
width="64" height="64" style="border:1;"></iframe>
</p>
<p>
Tips:
<iframe src="green-circle.svg" style="float:left;margin-right:1cm;"
width="64" height="40" style="border:1;"></iframe>
</p>
</body>
</html>
I have a 'reference' svg with a couple of different groups defined in it for different icons.
Later I define an svg area and use one of the groups. That's working great.
I would like to be able to swap put the group that's referenced in the xlink:href when something is clicked.
The jsFiddle
<!-- SVG SOURCE -->
<svg height="0" width="0" style="position:absolute;margin-left: -100%;">
<g id="unchecked-icon">
<path d="M22.215,44.176c-12.11,0-21.963-9.851-21.963-21.962c0-12.11,9.852-21.962,21.963-21.962 c12.11,0,21.961,9.852,21.961,21.962C44.176,34.325,34.325,44.176,22.215,44.176z M22.215,2.557 c-10.839,0-19.658,8.818-19.658,19.657s8.818,19.658,19.658,19.658c10.839,0,19.657-8.818,19.657-19.658S33.054,2.557,22.215,2.557 z" />
</g>
<g id="checked-icon">
<path d="M22.215,44.176c-12.11,0-21.963-9.851-21.963-21.962c0-12.11,9.852-21.962,21.963-21.962 c12.11,0,21.961,9.852,21.961,21.962C44.176,34.325,34.325,44.176,22.215,44.176z M22.215,2.557 c-10.839,0-19.658,8.818-19.658,19.657s8.818,19.658,19.658,19.658c10.839,0,19.657-8.818,19.657-19.658S33.054,2.557,22.215,2.557 z" />
<polygon points="20.337,32.279 12.274,24.947 14.642,22.344 19.745,26.985 30.005,12.311 32.888,14.327 " />
</g>
</svg>
<!-- SVG SOURCE ends-->
<p>Intial state</p>
<svg class="icon svg" viewBox="0 0 44.429 44.429">
<use xlink:href="#unchecked-icon"></use>
</svg>
<p>After Click</p>
<svg class="icon svg checked" viewBox="0 0 44.429 44.429">
<use xlink:href="#checked-icon"></use>
</svg>
Ok, I found out how you can do this. You need to be changing the Attributes of your <use> DOM Element. In basic JavaScript you would do this with setAttribute() and in jQuery you use attr().
Give the <svg> that will use the graphic and the <use> tag that says which graphic to use ids so that you can grab them with code. After that, it's all about setting up the listeners.
You ask for jQuery, however this is completely doable without so I am providing both ways
JsFiddle
Vector Graphics Toggler
JavaScript
js/index.js
// Toggle to demonstrate both ways of doing this
var BasicJavaScript = true;
// See what way we want to do this
if (BasicJavaScript) {
// When our document loads
window.onload = function() {
var
// Get the svg element we want to be able to change
svgElement = document.getElementById("checkSVG"),
// Get the use element that the svg uses
useElement = document.getElementById("checkUse"),
// Set a toggle bool to know if it should show a check
isChecked = true;
// Make sure the elements exist before we attach listeners
if (svgElement && useElement) {
// Whenever it gets clicked, change it's <use>
svgElement.addEventListener("click", function() {
// If it is checked, make it a check
if (isChecked)
useElement.setAttribute("xlink:href", "#checked-icon");
// Otherwise, no check
else
useElement.setAttribute("xlink:href", "#unchecked-icon");
// Toggle the state
isChecked = !isChecked;
});
}
};
}
else {
// Wait for the document to load
$(document).ready(function() {
// Set a bool for toggling the state
var isChecked = true;
// Add a listener for clicking on the SVG
$("#checkSVG").click(function() {
// If it is checked, make it a check
if (isChecked)
$("#checkUse").attr("xlink:href", "#checked-icon");
// Otherwise, no check
else
$("#checkUse").attr("xlink:href", "#unchecked-icon");
// Toggle state
isChecked = !isChecked;
});
});
}
CSS
css/index.css
#header{
font-family: Arial;
font-size: 2em;
}
#myGraphic{
width: 0;
height: 0;
}
#checkSVG{
width: 200px;
}
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<title>Vector Graphic Changer</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/index.css">
<script src="js/libs/jquery/jquery.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<!--The Definition of the Graphics-->
<svg id="myGraphic">
<g id="unchecked-icon">
<path d="M22.215,44.176c-12.11,0-21.963-9.851-21.963-21.962c0-12.11,9.852-21.962,21.963-21.962 c12.11,0,21.961,9.852,21.961,21.962C44.176,34.325,34.325,44.176,22.215,44.176z M22.215,2.557 c-10.839,0-19.658,8.818-19.658,19.657s8.818,19.658,19.658,19.658c10.839,0,19.657-8.818,19.657-19.658S33.054,2.557,22.215,2.557 z" />
</g>
<g id="checked-icon">
<path d="M22.215,44.176c-12.11,0-21.963-9.851-21.963-21.962c0-12.11,9.852-21.962,21.963-21.962 c12.11,0,21.961,9.852,21.961,21.962C44.176,34.325,34.325,44.176,22.215,44.176z M22.215,2.557 c-10.839,0-19.658,8.818-19.658,19.657s8.818,19.658,19.658,19.658c10.839,0,19.657-8.818,19.657-19.658S33.054,2.557,22.215,2.557 z" />
<polygon points="20.337,32.279 12.274,24.947 14.642,22.344 19.745,26.985 30.005,12.311 32.888,14.327" />
</g>
</svg>
<!--Header-->
<div id="header">My Graphic</div>
<!--The Graphic being used-->
<svg id="checkSVG" viewBox="0 0 44.429 44.429">
<use id="checkUse" xlink:href="#unchecked-icon"></use>
</svg>
</body>
</html>
I have the following document, where I plan to add some horizontal lines, one for each line of a textbox, where lines should have a "name: number" structure.
<!DOCTYPE html>
<html lang="pt-br" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<head>
<meta charset="UTF-8" />
<meta http-equiv="pragma" content="no-cache"/>
<title>Diagrama Audax</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<style type="text/css">
#sidebar {float: left; display: inline-block;}
#drawing {left: 330px; position: relative; display: inline-block}
#Locais {width: 300px; height: 500px;}
svg {background: #ddd; width: 500px; height: 500px;}
td, textarea {margin: 0; padding: 0;}
</style>
</head>
<body>
<table>
<tr id="tabela" cols="2">
<td>
<textarea id="Locais"></textarea>
</td>
<td>
<svg id="svg">
<circle stroke="black" fill="red" cx="200" cy="200" r="100" opacity="0.1"/>
<line id="path" x1="0" y1="0" x2="200" y2="200" stroke="black"/>
</svg>
</td>
</tr>
</table>
</body>
<script>
// A função abaixo pega a caixa de texto e associa o evento "draw" a ela
$(function () {
$("#Locais").keyup(function() {
valueString = $("#Locais").val();
if (valueString != "") {
lines = valueString.replace("\r","").split("\n");
CPs = [];
for (i in lines) {
eachLine = lines[i];
tmpDict = {};
values = eachLine.split(":");
for (j in values) {
eachVal = values[j];
tmpDict[j] = eachVal;
}
CPs.push(tmpDict);
}
DrawUsing(CPs);
}
})
});
function DrawUsing (lista) {
var svg = document.getElementById("svg");
for (element in lista) {
refname = lista[element][0];
refdist = lista[element][1];
var line = document.createElement ("line");
line.setAttribute('stroke', "black");
line.setAttribute('stroke-width', 1);
line.setAttribute('x1', 0);
line.setAttribute('x2', 100);
line.setAttribute('y1', refdist);
line.setAttribute('y2', refdist);
svg.appendChild(line);
console.log(document.getElementsByTagName("line").length);
}
}
</script>
</html>
As a "warm up", I tried to manipulate the SVG adding lines to it each time I press a key. Having pasted the following text (just pasting it with control+V is enough to trigger keyup event), but although the svg child list increases, no additional line is seen.
What am I doing wrong? (a lot, I suppose, since I am very n00b with javascript, and direct manipulation of inline <svg> elements (as opposed to <object>) is very poorly documented, it seems...
Any help is most welcome, thanks for reading!
SVG elements go in the http://www.w3.org/2000/svg namespace so instead of
var line = document.createElement ("line");
use
var line = document.createElementNS ("http://www.w3.org/2000/svg","line");