I created a geo map(world map).I try to stretch my map based on screen width.svg don't support width:100% so that i created a parent div width:100% for svg.
Sample Code
<div id="world-placeholder" style="width:100%;height:100%;">
// svg part goes here
</div>
Also, I tried svg attribute like viewBox and preserveAspectRatio.But Still i can't able to create.
I added my fiddle link below so kindly take a look and help me.
Fiddle Link - http://jsfiddle.net/acvefmhz/1/
Map is working fine.But i need show my map as a full screen(Need to stretch full window)
var width = window.innerWidth,
height = window.innerHeight;
http://jsfiddle.net/acvefmhz/4/
Related
The program I'm using is this
var canvas = this.__canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);
function AddCircle() {
canvas.add(new fabric.Circle({
left: 230/canvas.getZoom(),
top: 140/canvas.getZoom(),
radius: 75/canvas.getZoom(),
fill: 'green',
}));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<button onclick="AddCircle()">Add Circles</button>
<br>
<br>
<button onclick="Saveas()">Save as</button>
<button onclick="Openfile()">Open file</button>
<div class="box">
<canvas id="c"></canvas>
So now. I want to save the canvas (all the content/all the circles or objects) as a file. At this point I have seen that there are a few ways to save, for example, as png. But The problem is that I don't want to loose quality of the work inside of canvas.
I have seen libraries like jason. But I really don't know to implement them.
Also I have seen that working with svg for saving as files is easier since it can be saved/open as .xhml file without loosing quality.
My other question is:
Is there a easy way to convert the canvas to xhml, so when you click save button, you save the file as xhml, once saved back to use it by clicking "open file button" to open the .xhml file and conver it to canvas again (to show the content in the workspace)?
This are just my thinkings, any suggestions, libraries you recommend more or demo snippets for solving this would be very appreciated.
My last is. What do you recommend more, working with canvas libraries or svg libraries?. Im planning to make a very basic app like Prezi.com is (create objects) Online saving files and so... (also I plan to insert svg and maybe animations to the work space)
As you see, now I'm using canvas libraries ( in particular fabric.js). But since I'm starting it'd be easier for me to change if I'm not using the best alternative.
I am not sure that is possible,
HTML Canvas it's a Bitmap, that you draw in with Javascript.
SVG embedded in an HTML document, It's just like a subtree of the DOM, that still has a valid XML representation that any (not sure if any but most), SVG editors and viewers will understand.
You can "emulate" a canvas with SVG, easily by setting a svg or div + svg and then appending all the childs to this svg and because the geometric ideas of drawing in canvas and doing vector graphics are not that different, you could "migrate" to it.
The tip here is to define a viewbox on the SVG as you would define the canvas dimensions, and then, you can preserve your units. (just be careful with the numbers)
Plus it would be easier to attach events to the SVG elements.
To be honest the w3schools tutorial on SVG it's comprehensive enough, the rest from that it's just a good use case and use their building blocks (with javascript)
This is how you would create an SVG element for the DOM.
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.setAttributeNS(null, 'x', 5);
circle.setAttributeNS(null, 'y', 15);
# more code...
I think saving the image as a png file should be just fine. Png compression is lossless and supports transparent images, so drawing a previously saved png file to the canvas should perfectly restore the content without any changes.
Also, I'm not sure if storing it as a svg file would work that well, since svg is a vector graphics format and the canvas is a bitmap. I know it is possible to embed bitmap images in an svg file, but that requires it to be stored in a bitmap format in the first place.
(Pre-posting update to my question: I figured it out before posting, but am posting anyways for the public's information-- even though this is pretty obscure stuff.)
I'm working on a new scrolling site for a game here's the working page: http://pman.mindevo.com/
I have been able to get all the backgrounds matched up and scrolling together for a parallax effect, but now I'm working on getting an animation that moves across the screen (eventually I'll work more on using SVG sprites to actually have the character animated), but I can't seem to get the pixel sizes to match up properly.
My latest and best working solution so far is to make the SVG the same height as the rest of the background images. The problem I'm having is at different browser widths the character's 'pixels' (I use this term loosely because it's vector) do not match up with the background's 'pixels'.
Does anyone have any suggestions in keeping him the same pixel-by-pixel size as the backgrounds at different browser widths?
Here's some information about the background SVGs (the SVG open tag):
This is one of the tree background parallax layers:
<svg xmlns="http://www.w3.org/2000/svg" width="2697" height="150" viewBox="0 0 2697 150">
Here's the character's ('Potatoman') svg header:
<svg xmlns="http://www.w3.org/2000/svg" width="10" height="150" viewBox="0 0 10 150">
Originally it was embedded in the page as just an <img> by itself. Like so:
<div class="section2" data-1999="height:0;" data-2000="height:100%" data-3999="height:100%" data-4000="height:0" class="skrollable skrollable-between">
<h2> Some dialogue and potatoman animation happens in this section</h2>
<img src="images/theMan.svg" id="theMan" data-2000="left:-100%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:100%">
</div>
With the CSS like so:
#theMan {
position:absolute;
left: 0;
bottom:1.3em;
height:100%;
width:4%;
}
I had trouble getting it spaced properly vertically once it changed width.
Now that you've read this post, I figured out while doing it just how to make it work. If anyone has better ideas I will accept them as well. Otherwise I'm going to post my own answer to this question as I figured it out, but if anyone else is every working with Pixel graphics and wants to do what I'm doing, they have all the information right here.
So Here's how I had to change things around. First I removed the width property on the image (#theMan) and let it fall back to my basic img CSS like so
#theMan {
bottom:0;
height:100%;
left: 0;
position:absolute;
}
/* for reference img is set like so: */
img {width: 100%;}
Then I had to change my data attributes to manipulate the browser wide and browser high img to this:
<img src="images/theMan.svg" id="theMan" data-2000="left:-50%;" data-2300="left:0%" data-3300="left:0%;" data-4000="left:50%">
Since the image ended up centered in the page because it's width became 100%, shifting the entire image only 50% instead of 100% worked out, now when it scales it scales at the same rate as the background images as it's the same dimensions.
I recently started working with Google Dart (www.dartlang.org) and playing with SVG.
I am trying to scale a generated SVG to fit into a <div> using a viewBox.
People on StackOverflow already gave me a lot of help.
I am now able to scale paths like this: Dart create and transform an SVG path
But is seems that viewBox is made for scale-to-fit and using it would save me from scaling all paths in the svg separately. That is why I want to use a viewBox.
I tried the following:
// get bounding box of the created svg
Rect bb = path.getBBox();
// create a viewBox for the svg to fit in the div
var viewBox = svg.viewBox.baseVal
..x = bb.x
..y = bb.y
..width = bb.width
..height = bb.height;
// center the image inside the div
svg.preserveAspectRatio.baseVal
..meetOrSlice = PreserveAspectRatio.SVG_MEETORSLICE_MEET
..align = PreserveAspectRatio.SVG_PRESERVEASPECTRATIO_XMIDYMID;
But no scaling happens.
How would I solve this?
While writing this question and retrying to make sure I tried anything before asking here, I found the following solution.
It seems like Dartium (Chrome with a native Dart VM) has a bug (issue 12224) where changes to the viewBox are not reflected directly.
Adding the following code after changes to the viewBox forces Dartium to somehow resize to the requested size:
// add an empty ```<g>``` element to force svg resize
SvgElement g = new SvgElement.tag('g');
svg.append(g);
I'm trying to create a responsive version of the zoomable treemap example. What needs to be added so that the treemap resizes with the window?
When I try to change treemap.size() in an update method on $(window).resize(), nothing seems to happen.
I'm setting the svg to style="width: 100%; height: 100%" and the svg resizes, but the layout of the treemap does not. I also tried using viewbox and preserveAspectRatio per this answer and the treemap looks initially correct, however the zooming functionality no longer works correctly because the treemap layout doesn't know its correct size.
One way to handle this is as Lars Kotthoff told you can redraw the treemap.
For that first you should specify the width and height parameters as your graph containers width and height before that you should specify container width and height in percentage. And wrap the zoomable map drwing script inside a function (Let's call it as zoomabletreemap())
Then you should call the zoomabletreemap() function for the window resize event using JavaScript. Before calling the javascript you should remove the old graph also.
$(window).resize(function () {
var div = document.getElementById("my-svg-div"); //id of the div we are appending to the chart container to contain the svg
div.parentNode.removeChild(div);
ZoomableTreeMap();
});
Here is the working example for the same I explained above
I noticed that I cannot choose any width and height combo I want for the Spotify Play Button. If I use the generator tool and increase the width, it automatically increases the height field to match some arbitrary aspect ratio. So, I can never truly get the exact width and height I need (even within the min and max values specified on the developer page).
What I need is a width of 440px and height of 720px. When I set the width and height in the iframe to 440 x 720, it actually renders at 440 x 520.
Any plans to fix?
I had the same problem to customize the spotify play button.
I solved the problem by passing a custom style to the iframe object :
style="width:480px; height:480px; margin-top:5px; margin-left:15px; margin-bottom:21px;"
for instance :
<iframe src="https://embed.spotify.com/?uri=spotify:user:sharemyplaylists.com:playlist:0QoIyI6lLs5IfZMjOf5aNK&theme=white" frameborder="0" allowtransparency="true" style="width:600px; height:680px; margin-top:5px; margin-left:15px; margin-bottom:21px;"></iframe>
I know it's not documented that way, but it works for me.
I don't believe this is actually a bug; you could - as jackj4ck says - add the style attribute to the embed code or simply change the height and width attributes that the embed code gives you.
EG:
<iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
Would become:
<iframe src="https://embed.spotify.com/?uri=spotify:track:4bz7uB4edifWKJXSDxwHcs" width="440" height="720" frameborder="0" allowtransparency="true"></iframe>