i use innerHTML to add svg element,it works fine in chrome but in firefox it can not display; thanks so much for any ansower
<!DOCTYPE html>
<html>
<head>
<title>SVGInnerHTML demo</title>
<meta charset="utf-8" />
<script src="svginnerhtml.js"></script>
<script>
alter = function () {
var svg = document.getElementById('container');
svg.innerHTML = '<rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)"><rect width="100" height="20" fill="yellow" /></g>';
}
</script>
</head>
<body>
<svg id="container" width="100px" height="100px" http://www.w3.org/2000/svg>
</svg>
<p>
<button onclick="alter()">set .innerHTML</button>
<button onclick="alert(document.getElementById('container').innerHTML)">get .innerHTML</button>
</p>
</body>
</html>
A workaround is to add the innerHTML code as HTML, and not SVG. You can do that simply by using a <div> (instead of <svg>) in your HTML code as the placeholder, and insert the full SVG via innerHTML.
Replace:
<svg id="container" width="100px" height="100px">
</svg>
with
<div id="container" style="width: 100px; height: 100px">
</div>
And wrap your innerHTML string within an <svg> element:
var svg = document.getElementById('container');
svg.innerHTML = '<svg><rect width="100" height="60" fill="green" />'
+ '<circle cx="10" cy="19" r="20" fill="blue"></circle>'
+ '<text x="15" y="20" fill="white">hello world</text>'
+ '<g transform="translate(0, 70)">'
+ '<rect width="100" height="20" fill="yellow" /></g></svg>';
This should work in both Chrome and Firefox. Here's a JSFiddle.
Related
i'm making a markdown file in which is present an SVG.
Inside this SVG i wanna include an image, but it doesn't work.
Whenever i remove the image, it works fine.
You got any idea? Thank you so much in advance!
This is the svg code:
<svg fill="none" viewBox="0 0 508 125" width="800" height="200" xmlns="http://www.w3.org/2000/svg">
<foreignObject width="100%" height="100%">
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="dialogue-card" id="dialogue-box">
<image xlink:href="https://github.com/Goth-Rei-Codes/goth-rei-codes/blob/main/Images/propic.png" />
<div class="propic-container">
<div class="name-container">
<div class="dialogue-text">
<p>Welcome to my profile!</p>
</div>
<div class="arrow-down" id="next-dialogue"></div>
</div>
</div>
</div>
</div>
</foreignObject></svg>
I'm new to D3 and I need help with one task. When you click a button only text is overwritten but I want to remove all the children of the group with certain id and fill it with children of #refresh.
<?xml version="1.0"?>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style>
body {
background-color: #000000;
}</style>
</head>
<body>
<button onclick="refreshSvgElement('#c3a4ca3d-da2d-4b94-9a35-1088ba0cac19')">Change</button>
<svg id="refresh">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">BLUE</text>
</svg>
<svg id="main_window" position="fixed" width="100%" height="100%" viewBox="0 0 8074 4098">
<g>
<g id="c3a4ca3d-da2d-4b94-9a35-1088ba0cac19">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">RED</text>
</g>
</g>
</svg>
</body>
</html>
<script src="https://d3js.org/d3.v3.js"> </script>
<script>
function refreshSvgElement(id) {
var refreshElement = d3.select("#refresh");
var selection = d3.select(id)
.select("text")
<!-- .remove() -->
<!-- .append("text") -->
.text(refreshElement.text());
}
</script>
This is how I would do it. Store selection as a var, then select all current text and use .remove(), then append new text.
<?xml version="1.0"?>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9" />
<style>
body {
background-color: white;
}</style>
</head>
<body>
<button onclick="refreshSvgElement('#c3a4ca3d-da2d-4b94-9a35-1088ba0cac19')">Change</button>
<svg id="refresh">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">BLUE</text>
</svg>
<svg id="main_window" position="fixed" width="100%" height="100%" viewBox="0 0 8074 4098">
<g>
<g id="c3a4ca3d-da2d-4b94-9a35-1088ba0cac19">
<text class="text" x="0.40576159954071" y="51.4495124816895" fill="#E0E0E0" font-family="Calibri" font-size="55.4" transform="matrix(1,0,0,1,200,200)">RED</text>
</g>
</g>
</svg>
</body>
</html>
<script src="https://d3js.org/d3.v3.js"> </script>
<script>
function refreshSvgElement(id) {
var refreshElement = d3.select("#refresh");
console.log(refreshElement.text())
var selection = d3.select(id)
selection.selectAll("text").remove();
selection.append("text").text(refreshElement.text()).attr("x", "0.5").attr("y", "50");
}
</script>
I practice use d3 to drag svg circle around.
It works except following error appeared in console:
"Uncaught TypeError: a.target.className.indexOf is not a function"
What is wrong with my code? Following is my code:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<title></title>
<meta charset="UTF-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<p>
<svg width="300" height="200">
<circle cx="100" cy="100" r="5" fill="red" />
<circle cx="50" cy="70" r="5" fill="red" />
</svg>
</p>
<script>
var drag = d3.behavior.drag()
.on("drag", function () {
d3.select(this).attr("cx", d3.event.x)
.attr("cy",d3.event.y);
});
d3.selectAll('circle').call(drag);
</script>
</body>
</html>
This is because of Google Translate extension. Disabling it solves the problem.
The object doesn't contain that method. This will "shim" it.
SVGAnimatedString.prototype.indexOf = function () { return this.baseVal.indexOf.apply(this.baseVal, arguments); }
I currently have the following html.
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
</script>
</head>
<body>
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
</body>
</html>
For some odd reason when I open the html. I don't get the simple results I expect. Anyone have idea why?
The problem is that the script is running before the dom is loaded. There are a couple of fixes, the simplest being to move the script to the end of the body.
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<svg width="720" height="120">
<circle cx="40" cy="60" r="10"></circle>
<circle cx="80" cy="60" r="10"></circle>
<circle cx="120" cy="60" r="10"></circle>
</svg>
<script>
var circle = d3.selectAll("circle");
circle.style("fill", "steelblue");
circle.attr("r", 30);
</script>
</body>
</html>
http://jsfiddle.net/46r21pn1/
i am tying to solve this problem that is very annoying....
a simple structured html, with an svg element with the width and height of 700px:
<div id="wrapper">
<div id="gameZone">
<div id="background">
<svg id="svgRoot" width="700px" height="700px">
<circle cx="355" cy="600" r="10" id="ball" />
<rect id="pad" height="15px" width="150px" x="280" y="670" rx="10" ry="20"/>
</svg>
</div>
</div>
</div>
the question is why the hell the svg is displyed without the width and height in firefox?
in chrome and ie its working 100%;
please help me solve this problem.
here is an screenshot of the problem: http://shaharmesh.hostingsiteforfree.com/differance.jpg
Firefox debugger show the size as same as the result by svgRoot.getBBox(), the actual svg content bounding size.
To avoid the problem, place a invisible rect which has the same size as the canvas, or other shapes to take up the top-left and bottom-right corners of the svg.
<div id="wrapper">
<div id="gameZone">
<div id="background">
<svg id="svgRoot" width="700" height="700">
<rect width="100%" height="100%" stroke="none" visibility="hidden" pointer-events="none" />
<circle cx="355" cy="600" r="10" id="ball" />
<rect id="pad" height="15" width="150" x="280" y="670" rx="10" ry="20"/>
</svg>
</div>
</div>
</div>