I am drawing a simple two rectangle svg as follows:
<svg width="72px" height="72px" viewBox="0 0 72 72" xmlns="http://www.w3.org/2000/svg">
<rect stroke-dashoffset="0" x="2.4px" y="2.4px"></rect>
<rect ng-class="$ctrl.expiryClass"
x="2.4px" y="2.4px"
stroke-dasharray={{$ctrl.dashlength}}
stroke-dashoffset={{$ctrl.offset}}></rect>
</svg>
This works well in chrome and looks like this:
However, the svg is not showing up in FireFox and I am only seeing the purple 2h box.
Any idea whats going on?
I expect you are setting the rectangle's width and height using CSS. Correct?
If so, that's an SVG 2 thing that currently only works in Chrome. You'll need to use regular width and height attributes if you want this to be cross-browser compatible.
<rect stroke-dashoffset="0" x="2.4px" y="2.4px" width="100px" height="100px"/>
Related
I have a page displaying a d3 graph. This page also supports PDF exporting, and I am using the pdfkit library with the SVG-to-PDFKit extension. The issue I am having is that the graph on the page is very large to fill the width of the page, but this makes it too large when generating it to PDF. I have spent a lot of time researching how to resize the SVG's content (not just the view the SVG resides in) and there doesn't seem to be an already created function in the SVG-to-PDFKit library.
I found an answer that makes sense, but only occasionally works whenever chrome tools is up:
How can I resize an SVG?
If there is a better solution, I would love to know. My main issue is that the graph has to be resized after it is generated on the page, so that it doesn't skew the graph on the page, but only alters the graph on the PDF.
The code I have that occasionally works is:
var chartSVG = document.getElementById('chartSVG');
chartSVG.setAttribute("style", "viewBox: 0 0 32 32;");
SVGtoPDF(doc, chartSVG, 20, 170);
Is there possibly another attribute out there that would be better for the scenario? And does the line of code look like it's written correctly? I don't understand why it will only work when Chrome tools are up. Thanks in advance.
You definitely can resize SVG with setAttribute as well as with style property or via css:
var red = document.getElementById('red');
red.setAttribute('height', '50');
var green = document.getElementById('green');
green.style.width = '100px';
#blue {width:60px}
<svg id="red" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="red"/></svg>
<svg id="green" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="green"/></svg>
<svg id="blue" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="49" fill="blue"/></svg>
I am using loadTexture (THREE.ImageUtils.loadTexture('/images/areaYellow.svg')) for loading svg images
but when i zoom in image is getting blurred is there any way to load the image without blur. i am using version 73 . svgloader is started supporting from version 83. i need solution for version 73 or less.
Thanks for reading.
Try setting the width and the height of the SVG, Chrome will render it sharply.
For Example:
<svg id="Layer_1" data-name="Layer 1"
xmlns="http://www.w3.org/2000/svg" width="2048" height="1024" viewBox="-2 -40 2048 1024">
This question already has answers here:
How to animate handwriting text on the web page using SVG?
(2 answers)
Closed 6 years ago.
There is my svg:
<svg class="num-frame" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="326.229px" height="242.623px" viewBox="0 0 326.229 242.623" enable-background="new 0 0 326.229 242.623" xml:space="preserve">
<g id="Layer_1">
<g id="Layer_1_1_">
<path class="pathe" stroke-width="4" d="M268.971,60.112c-82.83-148.908-248.519,111.12-145.339,150.875c80.484,30.996,200.946-39.396,168.728-132.591
C261.292-11.486,94.387,6.078,87.437,102.417c-7.715,106.967,139.807,153.589,213.991,93.134c0.709-0.575-0.242-1.804-0.982-1.27
c-59.93,43.702-153.784,28.327-194.988-34.033c-36.732-55.58,0.429-114.795,58.131-131.517
C223.1,11.48,289.667,41.227,294.159,107.434c4.34,63.967-59.375,93.766-112.195,103.209
c-33.778,6.039-74.836,1.325-84.991-36.949c-7.695-28.985,5.878-62.127,19.867-86.895c34.6-61.241,105.552-97.912,150.95-26
C268.258,61.552,269.403,60.889,268.971,60.112L268.971,60.112z" />
</g>
</g>
</svg>
I need to make an animation, that will look like hand drawing this circle (line animation), I know have to make it with help of stroke but than the path will lost it's orginal shape, so I want animate orginal shape (path) in way like with stroke.
You could make put a simpler path on top of that one with a white stroke, and use the 2nd path's stroke-dasharray to do the animation that reveals the path underneath.
By simpler, I mean that the 2nd path would have a single stroke and no fill. Just make sure the stroke-width is wide enough to cover the widest part of the path underneath.
I'm working with animated SVGs / Snap.svg for the first time, so please forgive my lack of knowledge on this subject.
I made a series of 3 animated SVG "frames" (400x300px), each nested within a larger SVG (1200x300px) to contain them all. A div element with a clip style property hides the other two "frames" when they're not ready to be shown.
Using Snap.svg, each frame is supposed to "slide" into view using translate after a certain amount of time, and within each frame are some animated elements.
Long story short: the animation looks perfect in Firefox, but it looks awful in Chrome/Webkit. In Chrome, it looks like each of the frames are just being stacked on top of each other instead of side-by-side.
In addition, two of the elements (the cow circle joules and the graph circle graph) are rendering in the upper-left corner instead of using their translate property to position them in the center-right area.
You can see the animation in Plunker. Please try it out in both browsers to see what I mean.
http://plnkr.co/UhTy83
Firefox GIF screen capture:
Chrome GIF screen capture:
Thanks Ian in the comments to my question! Swapping out the <svg> tags for <g> (group) tags fixed this problem. It's interesting to me that Firefox allows you to transform <svg> elements but Webkit does not.
Before:
<svg class="slides" width="1200" height="300">
<svg class="slide1" width="400" height="300"></svg>
<svg class="slide2" width="400" height="300"></svg>
<svg class="slide3" width="400" height="300"></svg>
</svg>
After:
<svg class="slides" width="1200" height="300">
<g class="slide1"></g>
<g class="slide2"></g>
<g class="slide3"></g>
</svg>
This is my first SVG project, and I’m not a programmer, but I dabble in interactive infographics. My previous experience in this area comes from working with ActionScript.
I’m using plain SVG (no Raphael, D3, etc.) and trying to create an interactive barchart. After some initial difficulty with the SVG coordinate system and scaling, I found some code online that handles the postscaling translation:
<text x="x_coord0" y="y_coord0" transform="scale(x_scale, y_scale) translate(-x_coord0*(x_scale-1)/x_scale, -y_coord0*(y_scale-1)/y_scale)" …>text</text>
And I converted it into this JavaScript:
var translationfactor = ((0 - y_position)*(y_scalefactor - 1) / y_scalefactor);
var matrix = "scale(1," + y_scalefactor + ") translate(0," + Number(translationfactor) + ")";
targetbar.setAttribute("transform", matrix);
The problem is that I need the bars “translated” back to the chart’s baseline, not the original locations of their topmost points. Currently the correctly scaled bars are hugging the top of the chart:
http://billgregg.net/miscellany/upsidedown-barchart.png
I’ve tried several fixes, including plugging the bars’ ”missing height” into translationfactor (the bars start out the full height of the chart and get scaled down dynamically). Nothing has worked. Part of my problem is that, besides being new to SVGs, I can stare at that code all day and my brain still can’t parse it. Multiplying negative numbers is too abstract and at a fundamental level I just don’t “get” the math, which of course makes modifying the code difficult.
My questions:
(1) What’s the fix for the code above to position the bars back on the baseline of the chart?
(2) Is there a more transparent, more pedestrian way of accomplishing the translation? My first thought along these lines was that if a bar’s height is reduced to 40% of its original value, then multiplying the original Y coordinate value by 250% should reset the bar to its original location (at least its topmost point), but that doesn’t seem to work.
(3) Is there a way to set a bar’s point of origin to its bottom? In Flash it’s possible, though as far as I know it’s a manual, not a programmatic task.
(4) Is there a method similar to .localToGlobal() in ActionScript that would allow me to avoid having to mess with the local coordinate system at all?
Behind the scenes there is matrix math going on and it can be hard to get your head around the pre and post multiplication of arrays.
It's not entirely clear what you are trying to achieve, but reading between the lines, it sounds like you are wanting to provide graph coordinates in their raw(ish) form and have the SVG scale and position them for you(?)
If that's the case, then I think the solution is simpler than what you think.
Assuming I'm right, we'll start with something that looks like this:
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="">
<rect x="0" width="1" height="5" fill="red"/>
<rect x="1" width="1" height="11" fill="green"/>
<rect x="2" width="1" height="12" fill="orange"/>
<rect x="3" width="1" height="8" fill="blue"/>
</g>
</svg>
Where x is obvious and the bar length is in height. y defaults to 0, so we don't need it here.
You basically want to know what goes in the transform to scale and position the bars on your page. The fact that your graph is "upside-down" helps a little. Because the origin in an SVG is at the top left.
First apply a scale. Let's make the bars 20 pixels wide, and scale the lengths up by 10.
<g transform="scale(20,10)">
Next you want to position the graph on the page. Let's put the top-left corner at (40,40).
In SVG the transformations are concatenated in order (post-multiplied) so in order for the translation to be what you specify and not be multiplied by the scale, you should put it first.
<g transform="translate(40,40) scale(20,10)">
So the final SVG looks like this:
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<g transform="translate(40,40) scale(20,10)">
<rect x="0" width="1" height="5" fill="red"/>
<rect x="1" width="1" height="11" fill="green"/>
<rect x="2" width="1" height="12" fill="orange"/>
<rect x="3" width="1" height="8" fill="blue"/>
</g>
</svg>
The above has been simplified by assuming you have already subtracted the values from your base 20%. If you wanted to keep the pure raw values, it's possible, but things get a bit trickier. You would need to either tinker with both the y and height value of each bar, or use clipping to hide the part of the bar above 20%.
For "right way up"/normal graphs. All you need to do is make the y scale negative and translate the graph so that the bottom-left is where you want it.
<g transform="translate(40,140) scale(20,-10)">
Hope this helps.