SVG elements are not shown in a browser - javascript

I have faced to a quite strange situation. I have a script which draws some lines using jQuery SVG plugin. It is working in a separate html file. But once I copy that script and insert into another html file it stops showing SVG elements in a browser. It works perfectly, because when I see the source code of the page after running a script I could see that the script is adding SVG elements to the page. Here is SVG code of the page in any case:
<svg version="1.1">
<line x1="492" y1="503" x2="717" y2="576" stroke="#4A4A4A" stroke-width="2"></line>
<line x1="500" y1="400" x2="600" y2="400" stroke="#4A4A4A" stroke-width="2"></line>
<line x1="604.5" y1="539.5" x2="587.5" y2="542.5" stroke="red" stroke-width="2"></line>
<line x1="604.5" y1="539.5" x2="592.5" y2="527.5" stroke="red" stroke-width="2"></line>
</svg>
What could be the problem the those SVG elements are not shown in the browser? Have anybody else faced such a strange situation?

You forgot to add the SVG namespace tag to your page?

Try adding a viewBox attribute to the svg element to ensure that the coordinate system makes the lines appear within the svg viewport. Or make sure that in both documents size of the svg element is the same. My guess is that in one document the svg is quite wide, and in the other it's not as wide (thus clipping away the lines).

The problem is solved. I didn't notice that in the new page where SVG elements were not shown, the DIV element where I was drawing SVG elements had been wrapped by another DIV. And in the CSS file the wrapper DIV had an attribute display: table;. I removed that attribute and now SVG elements are shown. Thanks guys for you help and suggestions.

Related

How do i get the data of the paths and shapes of an <image> tag within an svg

I am having problems with the displaying of my image with as a source an URL, the problem is that is will not show within my svg <mask> when used as a <image x="0" y="0" height="350" width="350" attr.xlink:href="URL"> I know this must work because when i place the tag anywhere else in the svg it does show, but because i want it within the <mask> i need to find a way to succeed. when i open the image in a notepad file and copy the data into the <mask> tag it works perfectly, but because i need the <image> to change when the url changes i cannot hard code it into the <mask>
therefore the solution i thought of was to convert the <image> to a string to obtain the data and put this into a variable which i can place inside the mask. But i cannot find anywhere how i should convert this if it is even possible.
i want to convert this element of my html page
<svg xmlns:attr.xlink="http://www.w3.org/2000/xlink">
<image height="350" width="350" attr.xlink:href="URL"></image>
</svg>
into this to put it in a variable:
<polygon points="135.956,125.591 137.161,130.401 142.109,130.061 137.906,132.693 139.759,137.294 135.956,134.111 132.153,137.294 134.006,132.693 129.803,130.061 134.751,130.401 "/>
<polygon points="205.763,125.24 206.968,130.05 211.915,129.71 207.713,132.343 209.566,136.943 205.763,133.76 201.96,136.943 203.812,132.343 199.61,129.71 204.557,130.05 "/>
<g>
<g>
<path d="M155.837,153.597c0,0,0.126-0.008,0.362-0.022c0.236-0.012,0.582-0.034,1.024-0.034 c0.441-0.003,0.979,0.018,1.591,0.059c0.611,0.037,1.298,0.045,2.05,0.025c0.752-0.022,1.565-0.062,2.42-0.161 c0.852-0.111,1.778-0.246,2.727-0.261c0.948-0.025,1.931-0.039,2.93,0.068c 0.498,0.049,0.989,0.105,1.484,0.129 c0.494,0.027,0.996,0.034,1.493,0.032c1.008,0.01,1.986-0.048,2.979-0.162c0.998-0.109,1.985-0.093,2.929-0.069 c0.477,0.017,0.943,0.039,1.401,0.092c0.453,0.058,0.896,0.114,1.327,0.168c0.854,0.099,1.667,0.138,2.42,0.161 c0.751,0.02,1.439,0.011,2.05-0.025c0.612-0.041,1.15-0.063,1.591-0.059c0.441,0,0.788,0.022,1.024,0.034 c0.236,0.014,0.362,0.022,0.362,0.022s-0.504,0.028-1.381,0.124 c-0.439,0.045-0.967,0.131-1.579,0.225 c-0.612,0.095-1.307,0.17-2.065,0.199c-0.756,0.035-1.579,0.056-2.451-0.006c-0.872-0.067-1.767-0.145-2.703-0.138 c-0.941-0.001-1.905,0.037-2.883,0.144c-0.981,0.124-2.014,0.198-3.018,0.195c-0.509-0.004-1.014-0.016-1.521-0.049 c-0.506-0.03-1.011-0.093-1.501-0.147c-0.977-0.108-1.944-0.145-2.882-0.144 c-0.939-0.006-1.832,0.069-2.704,0.138 c-0.872,0.062-1.695,0.04-2.451,0.006c-0.757-0.029-1.453-0.104-2.064-0.199c-0.611-0.093-1.14-0.179-1.579-0.224 C156.341,153.625,155.837,153.597,155.837,153.597z"/>
</g>
</g>
is there a way to do this in javascript/typescript? or should i try some other way. i am using angular in this project
EDIT
i am trying it this way because i do not know what to do to fix my problem in my angular application.
i am trying to show designs on productimage for a webshop, the designs consists of text elements, which the users can adjust, and most of the time a svg logo of some sorts. because the designs mostly consists out of different colors, i am working with masking to make sure the correct design is shown. The problem is that the logo is not showing but the text is and when i paste the raw data into the mask it is working only with a tag within the mask it is not. therefore i am trying to obtain the raw data out of the image tag which i now have hidden on the top of my html page

Clipping of overflowing div inside foreignObject during translate in Firefox

I'm using D3.js to render g SVG elements, each containing a foreignObject so that I can attach a styled div text. The HTML looks like this:
<g class=node ...>
<circle ...></circle>
<clipPath ...>
<circle ...></circle>
</clipPath>
<image ...></image>
<foreignObject ...>
<div ...>...</div>
</foreignObject>
</g>
There are 60 of these elements contained in a parent g element which is translated with transform: translate(...) when the user scrolls.
Here, the foreignObject has height=1 and width=1 with overflow: visible. This allows the contained div to be sized based on the text it contains.
This works fine on Chrome and Edge (and Safari if I remember correctly), however on Firefox, the div element inside foreignObject gets 'clipped' when I call translate on the parent g element. The image below shows the correct rendering:
And the image below shows the rendering during translate.
I suspect this has something to do with the width and height of the g elements (i.e. node class) because the clipping occurs outside the boundary of g. How would I fix this? I've thought of using JavaScript to modify the width and height of g, but these attributes are based on the rendering which I don't know in advance.
Any help is appreciated!
Turns out this is fixed by setting the width and height properties of foreignObject to 100%.

add custom svg layer on google map (api v3)

Here is the problem,
I try to add a custom layer (svg) on a google map.
The layer I chose is really simple, it is just a "rect" but sooner or later these are gonna be much more complex with paths & so on... but that's not the problem actually.
I finally could add the svg on the map and make it visible,
but, since svg are not like image tags, i cannot find a way to scale/size the svg with the google map like simple images would...
here is a google example, when you scale (mousewheel) the map, the custom overlay size is changing too :
https://developers.google.com/maps/documentation/javascript/examples/overlay-simple
And, here is the svg I tried to add on the map, you will notice that the div (container) is located at specific points (lat/lng), and scales correctly with mousewheel on the map. BUT, the svg layer I tried to add into it, is jut NOT into it at all, and, does not scale on mousewheel... the only point going fine with this svg layer is that it's working with map dragging...
svg layer should be contained in the defined div (with bounds...). Svg is a simple layer :
<svg width="400" height="400" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" class="svg-editor">
<g>
<rect id="svg_5" height="181" width="311" y="95.25" x="47.75" stroke-width="5" fill="#FF0000"/>
</g>
</svg>
here is the fiddle :
http://jsfiddle.net/7b3byzrf/27/
Thanks for help!
If you want your svg image to be correctly scaled, you need to have
a viewBox (you've put it, this part is OK)
no dimension in the svg element (here's the problem).
Remove those lines :
svg.setAttribute('width','400');
svg.setAttribute('height','400');
Demonstration

SVG clipPath not working in Firefox when defined dynamically

I have the following code:
<div class="blah" style="clip-path: url(#clippath)"></div>
<svg width="0" height="0"><defs><clipPath id="clippath">
<rect x="0" y="0" height="100" width="100"></rect>
</clipPath></defs></svg>
This correctly clips the blah div to 100x100 square. However, if I use JavaScript to add the svg to the DOM (rather than it being there from page load), it no longer works. Specifically, I'd like to create a dynamic clip path based on events happening in my app.
What am I doing wrong? This only needs to work in Firefox (which unfortunately doesn't support clip-path: polygon(...))
Make sure you are you using the namespace variant of createElement.
document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
If you are just using createElement() then the element will be going into the default namespace (ie HTML) and won't be recognised by the SVG renderer.

Sorting animated GIFs in SVG without stopping the animation using D3/JavaScript

My D3-based visualization produces an HTML5 SVG element with animated GIFs in it. For simplicity, take this example:
<svg>
<image href="animated.gif"></image>
<svg>
Upon mouseover, I'd like to highlight the image by putting a circle behind with a fading gradient for a glow effect. As SVG renders elements on top of each other, the output must look like this:
<svg>
<circle class="gloweffect"></circle>
<image href="animated.gif"></image>
<svg>
After two wasted days, I gave up trying to insert the circle element at the correct position immediately with D3's insert. It just didn't work, esp. since the visualization contains lots of other stuff and the insert position is hard to express.
So instead, I use D3's append to add the circle at the end. Then I call a sorter which removes all elements from the SVG, sorts them, and re-appends them in the correct order:
<svg>
<image href="animated.gif"></image>
<circle class="gloweffect"></circle>
<svg>
--> remove everything
<svg>
<svg>
--> sort and reinsert
<svg>
<circle class="gloweffect"></circle>
<image href="animated.gif"></image>
<svg>
And here comes the challenge: This works fine in all browsers, except ... wait for it ... IE9. (Okay, lame wait.)
As soon as the image element is removed, IE9 stops the GIF animation and does not restart or continue it upon reinsertion. The image simply gets stuck at the first frame and stays that way.
So my question: Is there a way to make IE9 continue the animation after reinsertion? I found plenty of old threads regarding regular img elements, esp. suggesting to reset the picture in a delayed thread, but none of them seems to work for the image element in SVG.
--Florian
Instead of inserting and removing elements (which is expensive and error prone) just make them invisible, you could do something such as...
<svg>
<g class="glow">
<circle class="gloweffect"></circle>
<image href="animated.gif"></image>
</g>
<svg>
And then in your CSS:
g.glow .gloweffect {
opacity: 0;
}
g.glow:hover .gloweffect {
opacity: 1;
}

Categories