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 :/
Related
I have the bellow pandoc generated xhtml in my EBUP file:
cat EPUB/text/ch001.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops" xml:lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="generator" content="pandoc" />
<title>ch001.xhtml</title>
<link rel="stylesheet" type="text/css" href="../styles/stylesheet1.css" />
</head>
<body epub:type="bodymatter">
<section id="valami" class="level1 unnumbered">
<h1 class="unnumbered">valami</h1>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="50"> </circle>
</svg>
<svg class="svg-preview" height="13" id="m_s2tex_0" style="--latex_align: -0.31706pt; --latex_height: 13px; vertical-align:-0.31706pt; opacity: 1" viewbox="1872.019782 1482.72797 4.782067 7.770859" width="8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <path d="m3.207272-6.981816c0-.261818 0-.283636-.250909-.283636c-.676363 .698182-1.636363 .698182-1.985454 .698182v.338182c.218182 0 .861818 0 1.429091-.283636v5.650908c0 .392727-.032727 .523636-1.014545 .523636h-.349091v.338182c.381818-.032727 1.330909-.032727 1.767272-.032727s1.385454 0 1.767272 .032727v-.338182h-.349091c-.981818 0-1.014545-.12-1.014545-.523636v-6.119998z" id="s7g0-49"> </path> </defs> <g id="s7page1"> <!--start 1872.019782 1490.246126 --> <use x="1872.019782" xlink:href="#s7g0-49" y="1490.246126"> </use> </g>
<script type="text/ecmascript">
if(window.parent.postMessage)window.parent.postMessage("0.31706|6|9.75|"+window.location,"*");
</script>
</svg>
</body>
</html>
</section>
</body>
</html>
It is basically 2 simple SVG object. The first one is a hand written just for the test and it is working:
<svg xmlns="http://www.w3.org/2000/svg">
<circle r="50"> </circle>
</svg>
The second is automatically generated and it is not working.
<svg class="svg-preview" height="13" id="m_s2tex_0" style="--latex_align: -0.31706pt; --latex_height: 13px; vertical-align:-0.31706pt; opacity: 1" viewbox="1872.019782 1482.72797 4.782067 7.770859" width="8" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <path d="m3.207272-6.981816c0-.261818 0-.283636-.250909-.283636c-.676363 .698182-1.636363 .698182-1.985454 .698182v.338182c.218182 0 .861818 0 1.429091-.283636v5.650908c0 .392727-.032727 .523636-1.014545 .523636h-.349091v.338182c.381818-.032727 1.330909-.032727 1.767272-.032727s1.385454 0 1.767272 .032727v-.338182h-.349091c-.981818 0-1.014545-.12-1.014545-.523636v-6.119998z" id="s7g0-49"> </path> </defs> <g id="s7page1"> <!--start 1872.019782 1490.246126 --> <use x="1872.019782" xlink:href="#s7g0-49" y="1490.246126"> </use> </g>
<script type="text/ecmascript">
if(window.parent.postMessage)window.parent.postMessage("0.31706|6|9.75|"+window.location,"*");
</script>
</svg>
I have tried to simplified down the second one to see why is not working, but without luck. Anybody have an idea what could be the reason?
update1: The file can be opened in Safari and it is rendering both SVG image correctly. I have uploaded a screenshot here. The first SVG is the quarter circle, the second one is the number 1.
You've written the viewBox attribute as viewbox.
SVG and XHTML are case sensitive languages whereas HTML is not so if the EPUB importer is expecting XHTML then this will be a problem.
Most epub viewers that I'm familiar with use a web engine for rendering. So to get your SVG to be visible in an epub, it probably needs to be visible in a web browser.
Trying your second SVG, I don't see anything in Chrome or Firefox. Or in a generic image viewer.
If I add a stroke= value to your path, I see "something" in the browser, but it's a tiny little thing. As if the viewbox and/or the use settings are confusing the browser.
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
I have created an XHTML file with inline SVG. It does not display when tested as .XHTML but it does when tested as HTML. I have scoured the internet and believe I have the proper namespaces, etc. specified however, I'm stumped as to why it's not displaying. Please help me understand what I'm doing wrong.
Note: I have also tried with or without xlink and I see no change (however I require xlink as I need safari support).
Thanks in advance for your help!
Example: index.xhtml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>inline svg in XHTML file</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
<path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
</symbol>
</defs>
</svg>
<div>
<svg style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg> home
</div>
</body>
</html>
Use the xmlns attributes in the bottommost <svg> as well, then it'll work.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http-www.w3.org/2000/svg" xmlns:xlink="http-www.w3.org/1999/xlink">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<title>inline svg in XHTML file</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" height="0">
<defs>
<symbol id="icon-home" viewBox="0 0 32 32"><title>Home Icon</title>
<path d="M32,19.271L16,5.582L0,19.271v-5.582L16,0l16,13.689V19.271z M28,18.773V32h-8v-8.817h-8V32H4V18.773l12-9.919L28,18.773z" />
</symbol>
</defs>
</svg>
<div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width:32px; height:32px;" viewBox="0 0 32 32"><use xlink:href="#icon-home" /></svg> home
</div>
</body>
</html>
By the way, as <svg> in XHTML has only been defined since XHTML5, using an XHTML 1.0 doctype will not validate (even if it will run perfectly with the proper namespaces). The solution is to change the doctype to XHTML5.
Double check that you're using the .xhtml file extension then make sure that your svg has the following:
<svg xmlns="http://www.w3.org/2000/svg">
</svg>
Source
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.
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.