I'm new to d3js and trying to implement zoom and panning to a specific layer. While zooming the floorplan(attached image) the marker size also changes accordingly. Ideally the marker should change position with its fixed size based on panning or zoom level. I'm using below mentioned code. Any help is appreciated.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
</head>
<body>
<svg id="floorplan" style="width:420px;height:600px">
<g id="maingraph">
<g class="background-image">
<image xlink:href="floorplan.jpg" x="0" y="0" width="420" height="600"></image>
</g>
<g class="marker-image">
<image xlink:href="icon.png" x="310" y="380" width="40px" height="40px" ></image>
</g>
</g>
</svg>
</body>
<script type="text/javascript">
var svg = d3.select("#maingraph")
.call(d3.behavior.zoom().on("zoom", function () {
svg.attr("transform", "translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")")
}));
</script>
</html>
Before Zoom
After Zoom, Marker should change position not size
Floorplan
Marker
Related
I am trying to load an SVG from a .svg file. When I copy the SVG code into the webpage itself, it works. However, it doesn't work when I load the SVG code from a .svg file.
This works:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<svg height="100" width="100">
<polygon points="0,40 60,40 60,100 40,100 40,60 0,60" style="fill:lime"/>
</svg>
</body>
</html>
This does not work:
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<object data="pic.svg"></object>
</body>
</html>
pic.svg:
<svg height="100" width="100">
<polygon points="0,40 60,40 60,100 40,100 40,60 0,60" style="fill:lime"/>
</svg>
Even using
<img src="pic.svg"/>
does not work.
Why does this happen? Where am I going wrong?
I'm using material designe icon in an svg format.
When I try to display the icon in my html I get the error:
"icon mdsize: A not found".
I saved all the icons in an svg file with all the paths.
My config.js file:
app.config(function($mdIconProvider){
$mdIconProvider.iconSet('mdsize', 'fileSrc', 24);
});
My svg file:
<g id="A">
<path d="iconPath" fill="none"/>
<path d="anotherPath"/>
</g>
My html:
<md-icon md-svg-icon="mdsize:A"></md-icon>
The md-icon tag is inside an md-list-item that is generated by ng-repeat.
Important to mention: There is another md-icon that is saved in the same svg file inside the md-list-item and it is shown on the html page. The way of presenting them is iddenticle so I don't see why the other icon won't show.
I don't know much about svg but I've had a play and this works without errors.
fileSrc.txt
<svg width="100" height="100">
<g id="A">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</g>
</svg>
test.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>
<script>
angular.module("elcomaApp", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache'])
.config(function($mdIconProvider){
$mdIconProvider.iconSet('mdsize', 'fileSrc.txt', 204);
})
.controller("MainController", function() {
});
</script>
</head>
<body ng-app="elcomaApp" ng-controller="MainController" ng-cloak>
<md-icon md-svg-icon="mdsize:A"></md-icon>
</body>
</html>
If I replace the content of fileSrc.txt with the following I also don't see any errors:
<svg width="100" height="100">
<g id="A">
<path d="iconPath" fill="none"/>
<path d="anotherPath"/>
</g>
</svg>
Note: These files work with Firefox but Chrome shows a "Cross origin" error.
I am working on using external svg groups marked by ID for initiation of event via mouseover initiator using SnapSVG library.
Here is a part of the external SVG code:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 230 230" enable-background="new 0 0 230 230" xml:space="preserve">
<g id="outter" class="all">
<path fill="#FFED9F" d="M43.893,79.064c-21.801,10.734-36.47,30.805-36.47,53.792c0,22.981,14.668,43.053,36.469,53.791
c21.801-10.738,36.468-30.807,36.468-53.791C80.361,109.869,65.692,89.801,43.893,79.064z"/>
</g>
<g id="leaf" class="all">
<path fill="#2ECC71" d="M43.891,91.462c-16.776,8.263-28.063,23.704-28.063,41.394c0,17.688,11.288,33.131,28.063,41.395
c16.777-8.264,28.063-23.703,28.063-41.395C71.955,115.169,60.667,99.727,43.891,91.462z"/>
<path opacity="0.2" d="M15.828,132.855c0,17.688,11.288,33.131,28.063,41.395V91.462C27.115,99.725,15.828,115.166,15.828,132.855z"/>
</g>
</g>
</svg>
And here is the html section:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="google-site-verification" content="KdV7EMXqTSj0PRKumPI3ztKMfT9-kJyYvkmaQNPfdtE" />
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<script src="snap.svg-min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto:100' rel='stylesheet' type='text/css'>
<title>Synbio.cz</title>
</head>
<body>
<div id="svgupperdiv">
<svg id="svgupper" viewBox="0 0 230 230" preserveAspectRatio="xMaxYMin meet" height="60%" width="60%"></svg>
</div>
<script>
var p = Snap("#svgupper");
Snap.load("listeklogo2.svg",onSVGLoaded2);
function onSVGLoaded2(e){
var all = e.selectAll(".all");
p.append(all);
var leaf = p.select("#leaf");
var outter = p.select("#outter");
outter.attr({opacity: 0});
leaf.mouseover(lfunction);
function lfunction(){
outter.animate({opacity:1},210,mina.easout);
}
};
</script>
</body>
</html>
I really don't know what to do with it :/
The exact same code works under Windows with Chrome, FF and IE.
I just switched to Linux and this code doesn't work neither on FF or Chrome?
I tried the "style" tag, with no change in results.
Can someone help?
Is there a browser independent way of having 100% svg coverage?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="jquery-1.11.2.min.js"></script>
<script src="snap.svg-min.js"></script>
<svg id="svgEle" height="100%" width="100%"></svg>
<script>
var snapCanvas = Snap("#svgEle");
var circle = snapCanvas.circle(100, 100, 100);
</script>
</body>
</html>
The browser is behaving correctly. If you try the HTML on Windows Chrome you get the same result.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<svg id="svgEle" height="100%" width="100%">
<circle cx="100" cy="100" r="100"/>
</svg>
</body>
</html>
The reason is as follows:
You haven't specified an actual size for the SVG. You've told it to be 100% of it's parent (<body>).
The <body> by default has width 100% and its height collapses to the height of its children.
The size of its child (the SVG) is not determinable, so the <body> height defaults to the "intrinsic size" used by browsers when it can't determine a size. That height is 150px.
So the end result is that the SVG has a size of 100% by 150px.
Is anyone able to offer an explanation of the change in relative size of the rect and text when adding attributes (width, height, viewBox) to the SVG element? (tested in Firefox 30 on Linux x86_64)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<script src="jquery.js"></script>
<script src="d3.js"></script>
</head>
<body>
<svg>
<g transform="translate(10, 10)">
<rect fill="yellow" height="7.45em" width="29.4em"></rect>
<text stroke="black">
<tspan dy="1.69em" x="2.65em">PNUUUUUUUUU</tspan>
<tspan dy="1.69em" x="2.65em">TEST TEST TEST TEST TEST</tspan>
<tspan dy="1.69em" x="2.65em">EEE</tspan>
<tspan dy="1.69em" x="2.65em">QQQ</tspan>
</text>
</g>
</svg>
</body>
</html>
shows as desired:
changing the svg element to
<svg width="400px" height="300px">
or
<svg width="400px" height="300px" viewBox="0 0 400 300">
gives this result:
See: http://www.impressivewebs.com/understanding-em-units-css/
If you do not set font-size anywhere in your document (css or html file), then "em" will be relative to the size of font used by the web browser.
In google chrome, this is in settings under: web content -> font-size.