I want to use an (external) SVG icon and want to be able to style the fill color using CSS (as far as I can see, the best way to do this is creating a <svg><use xlink:href="…" /></svg> structure at every place where I want to use it). Simultaneously I want it to be scalable with correct aspect ratio, so it can be used around different text sizes.
But scaling with height:1.5em;width:auto AFAICS only works when the SVG has a viewBox. Is there a way to obtain that viewBox or do the scaling correctly without it?
If your SVG editor doesn't add a viewBox, there is no easy way to get it - other than working out the dimensions yourself and adding it manually.
Use your mouse coordinates readout in your editor, or
Use javascript and call getBBox() on an appropriate element, or
Use trial and error. Fiddle with the x, y, width, and height iteratively until you narrow in on the dimensions.
Related
"A stackblitz is worth a thousand words": https://stackblitz.com/edit/angular-zoom-crop-marker
Basically what I'm trying to do is to have a square drawn above a certain position in an image (<img>), and have that dynamically adjust to the image while being zoomed in / out and cropped. The stackblitz link has 3 views, the basic view which is a plain image, a zoomable view (which I got working as well) and a view where the imaged is "zoomed in and cropped" while being zoomable - This is where I need your help.
Should I crop using object-fit in some way? Is it better if I use a canvas to handle this? I've been at this for a whole day I and I feel my css knowledge is too limited to pull this of.
Bonus question: How would I go about to have the zoom-in zoom-out buttons add/remove one image per row using only css flex-box? (ie: not statically adding x pixles in height and width, but rather increase or decrease the size of each image so that another image is removed or added (per row) while always filling up all the available space)
Thank you in advance!
Managed to solve it myself. stackblitz updated with a working solution.
I am trying to place two svg files side by side in a web page. This I have done using susy to create the spans, first one is 2 columns wide, the second 10 columns. I place a narrow bar graph in the first span, and a wide line graph in the second span.
The problem I am having is scaling the graphs. they look like this:
But I want them to look more like this:
They are svg files generated with pygal and I achieved the second image by forcing a size in pygal, but it's not elegant and fails wehn the screen size changes.
How can I make the svg bar chart scale the height without scaling the width and do it dynamically in a web browser instead of manually changing the size in pygal? I also cant manually edit the svg files as they are generated via another system and update frequently.
Your graphs should load in two different divs, so that you can set a different width style for each, depending on a view-based css class (like col based classes in Twitter Bootstrap). If you load dynamic svg's (without any explicit_size setting in Pygal) you should be able to handle different window sizes.
im trying to resize image on hover....but we can only specify static length values and no % values in transform:scale of css3 i guess. Example:
#imgp:hover{-webkit-transform: scale(7,6);transform: scale(7,6);}
but using above the wide images are showing with equal dimensions ie. square.
how to show with original ratio ? is it possible ?
perhaps you're trying it for a square image, scaling in only one dimension will solve the problem:
See Fiddle by #drip.
[http://jsfiddle.net/83BgY/]
I'm programming a debate-graph with Raphael JS. Users can add nodes to the graph. Eventually the graph gets really big and the canvas is still the same size. the canvas (in raphael js: paper) is inside another div with "overflow: scroll;", so lets ignore screen real estate
Is there a way that I resize the canvas without reloading the page (to assign new X/Y values)?
Alternatively, can I create a second bigger canvas in parallel and copying all the elements over? is there a way?
If I understand your question, just call setSize() to expand the size of the canvas to the size needed as you need it. I've used this in a div with overflow:scroll to get the effect you describe.
In my case, I didn't want to resize, I wanted to zoom.
In other words, show the user the growing graph inside a constant-sized div.
So I needed: setViewBox()
I'm working on an application where I'm drawing some rectangles on the screen, and then will need to manipulate the shapes (change their size, location). I tried to do something with .drawRect and clearing the shape each time I was manipulating it, but the RAM usage was spiking and then falling (presumeably because i keep reinitializing a new component and then removing it, and garbage collection was cleaning it out). This seems like its probably not the most efficient way to do it.
Is there a way for me to just create a shape once, and then move it around on a canvas (and change its width and height without all this RAM usage?
If all you're doing is changing it's offsets, and adjusting it's width and height without needing to fundamentally change the structure of the shape (such as rounding the corners of a rectangle of some such) you should be able to just maintain a reference to the Shape and adjust it's x, y, scaleX, scaleY properties to effect the changes.
You can try Degrafa to draw the rectangle.
To move the rectangle:
Changing the x and y or height and width property of the shape
Using the Flex Move Effect