For some reason when I try to make a group using snap.svg I get:
Uncaught TypeError: s.group is not a function
No mater what I try I cannot get it to work! It's as if Snap.SVG isn't working at all but my Snap("#wrapper"); works fine?
My Code is below:
index.js
s = Snap("#wrapper");
var text = s.selectAll("#text");
var text3group = s.group(text);
HTML:
<html>
<head>
<meta charset="UTF-8">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="http://snapsvg.io/assets/js/snap.svg-min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="wrapper">
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 595.3 841.9" style="enable-background:new 0 0 595.3 841.9;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
#Layer_2{fill:#FFF}
.st2{font-size:40px;font-family: "proxima-nova",sans-serif;}
.bold{
font-weight:900;
}
</style>
<g id="text">
<text id="XMLID_2_" transform="matrix(1 0 0 1 47 177.0039)">
<tspan x="-20" y="0" class="st1 st2 bold">90%</tspan>
<tspan x="74" y="0" class="st3 st2"> of the data in the world today has </tspan>
<tspan x="15" y="50" class="st3 st2">been created in </tspan>
<tspan x="305" y="50" class="st4 st2 bold">the last two years</tspan>
<tspan x="640" y="50" class="st3 st2">.</tspan>
</text>
</g>
</svg>
</div>
<script src="js/index.js"></script>
</body>
</html>
Main problem is likely that Snap needs an SVG element, not a DIV element (unlike Raphael where you can give it a DIV). Try moving the id 'wrapper' to the SVG (or give it a different name and use that).
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.
The SVG canvas is configured to adjust to the browser window and always fill 100% horizontally and vertically.
I want the blue cube to always be in the bottom center of the window and also stay the same size.
Is there any way to change the position of the cube or the viewBox, so that the cube always stays in the bottom center no matter what size the browser window has?
Thank you in advance for your help.
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body { background:#eee; margin:0 }
svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
</style>
</head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="lightgreen"/> <!--Background-->
<rect x="0" y="0" width="100" height="100" fill="blue"/> <!--Cube-->
</svg>
</body>
</html>
I would use javascript for this. The clientWidth and clientHeight will give you the size of the SVG canvas.Alternatively you may use the getBoundingClientRect()
let x,y;
function init(){
x = svg.clientWidth/2 - 50;
y = svg.clientHeight - 100;
therect.setAttributeNS(null,"x",x)
therect.setAttributeNS(null,"y",y)
}
setTimeout(function() {
init();
addEventListener('resize', init, false);
}, 15);
body { background:#eee; margin:0 }
svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
<svg id="svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%">
<rect x="0" y="0" width="100%" height="100%" fill="lightgreen"/><!--Background-->
<rect id="therect" x="50%" y="100%" width="100" height="100" fill="blue"/><!--Cube-->
</svg>
You can move the viewbox origin to the center with viewbox="-50 -50 100 100",
and from there on draw all the elements taking into account the relative values set by viewbox:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="screen">
body { background:#eee; margin:0 }
svg {display:block; position:absolute; width:100%; height:100%; background:#fff;}
</style>
</head>
<body>
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-50 -50 100 100" >
<rect x="-50vw" y="-50vw" width="100vw" height="100vw" fill="lightgreen"/> <!--Background-->
<rect x="-25" y="0" width="50" height="50" fill="blue"/> <!--Cube-->
</svg>
</body>
</html>
PS:I don't how well vw units are supported as svg attributes values so you might want to test that.
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.
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title></title>
</head>
<style>
svg{
overflow:hidden;
}
defs:hover{
transform:scale(1.2);
}
</style>
<body style="background:url(http://namonitore.ru/uploads/catalog/znamenitosti/karolina_kurkova__i_devushki_v_bikini_1280.jpg); background-size:cover;">
<svg width="400" height="240">
<polygon points="10 220, 10 10, 280 10,380 220"
style="fill:green; stroke:green; stroke-width:3; opacity="1" />
</svg>
<svg width="400" height="240" style="position:relative; left:-120px;">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240">
<image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" width="400" height="240"/>
</pattern>
</defs>
<polygon points="110 220,10 10,380 10,380 220"
style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" />
</svg>
</body>
</html>
It is necessary that when you hover over the girls , the effect was as if with background-position.
I do not know much English , but ask longer who.
how to make the zoom effect when you hover over the image of girls ?
If I understand your problem correctly then you should add a class to the polygon that's next to the <defs> element, add a class and use css on that polygon. For
example:
<svg width="400" height="240" style="position:relative; left:-120px;">
<defs>
<pattern id="img1" patternUnits="userSpaceOnUse" width="400" height="240">
<image xlink:href="http://www.imagefully.com/wp-content/uploads/2015/07/Sexy-Pause-Girl-Pic.jpg" x="0" y="0" width="400" height="240"/>
</pattern>
</defs>
<polygon class="girls" points="110 220,10 10,380 10,380 220"
style="fill:url(#img1); stroke:0; stroke-width:0; opacity="1" />
</svg>
And then in your CSS instead of:
defs:hover{
transform:scale(1.2);
}
Do this:
polygon.grils:hover{
transform:scale(1.2);
}
I have the following SVG file.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!--<svg width="100%" height="500">-->
<svg id="deviceImage" class="DeviceImage" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMinYMin" currentScale="1" width="3000px" height="1500px" oncontextmenu="return false">
<script type="text/ecmascript">
<![CDATA[
function ExmpleFunction(event, componentGroup)
{
alert('Hello World');
}
]]>
</script>
<defs>
<!-->>>TestShape>>>-->
<symbol id="TestShape">
<polygon points="1,1 650,1 630,175 21,175"></polygon>
</symbol>
<!--<<<TestShape<<<-->
</defs>
<!--TestShape-->
<g id="p1" transform="translate(50, 35)" visibility="visible">
<use id="p2Basic" xlink:href = "#TestShape"/>
</g>
<rect x="500" y="10" width="100" height="150" fill="blue"/>
<foreignObject x="0" y="0" width="200" height="250">
<div xmlns="http://www.w3.org/1999/xhtml">
<embed id="wert" src="TestModule-Basic.svg" type="image/svg+xml" />
</div>
</foreignObject>
</svg>
The aim is to embed another svg image which supports the internal script (so this can't be done as an image) so I am using foreignObject
When run the above code displays the test shape and the rectangle, but it does not display the svg image in the foreignObject.
By experimenting I discovered that if I remove the xmlns="http://www.w3.org/2000/svg" from the main SVG node, the svg image in the foreignObject is displayed but the test shape and rectangle are not displayed. I also see the text within the script tag as part of the image.
I obviously need to include the svg namespace but I am not sure how I get both to display?
All help appreciated!