I'm drawing d3 line graphs and tipsy tooltips attached to the circles.
The tooltips work fine in Chrome/Safari but in Firefox and IE when you hover over a point, while the respective tooltip does appear, it shows up outside the graph/SVG element in the top left hand corner of the screen (html element) instead of next to the point.
This is how I'm attaching the tooltip:
jQuery('g circle').tipsy({
gravity: 'w',
html: true,
title: function() {
return this.textContent;
}
})
Any advice on what I'm doing wrong would be much appreciated.
This patch adds proper SVG support to Tipsy.
tipsy uses offsetWidth and offsetHeight on elements. It assumes that such things work on SVG elements, unfortunately that assumption is incorrect outside of Chrome/Safari.
The CSSOM specification says that offsetWidth/offsetHeight are html element properties. It seems that Chrome/Safari have put these on their SVG elements but there's no specification that says that that should be the case.
You'll either need to fix tipsy to be cross-browser or get the author to do it. Using getTransformToElement and/or getBBox is probably what's needed.
Related
I am truly stumped at this point. I need to get the bounding box of a path string. I cannot use RaphaelJS because it's integrated too deeply with the browser, and naturally the Illustrator Type Library doesn't include anything to help me.
Where can I go from here? Should I just spend the time implementing my own algorithm?
check out:
http://www.jongware.com/idjshelp.html
or:
http://yearbookmachine.github.io/esdocs/#/Illustrator/PageItem
Rect geometricBounds Read only Property
The bounds of the artwork excluding stroke width.
There is not a lot of info on the Object Model Viewer about it. If it behaves like in InDesign the coordiantes depend on:
The page origin
The used unit
The page size
I hope that helps. You need to have a document open and have some PageItem selected. Should work with mostly everything you can put on a page in Illustrator.
var main = function(){
if(app.activeDocument.selection.length > 0){
var path = app.activeDocument.selection[0];
alert(path.geometricBounds);
}
}
}
main();
Are there situations where an SVG <text> element's dominant-baseline style will be ignored?
I have two <text> labels in two different parts of my SVG. The dominant-baseline: central applied to one works without issue (for example, when I open it up in Chrome's web inspector and change the value, the element moves around as I would expect it to), but it does not seem to affect the other (ex, changing the style's value from the web inspector doesn't change the position of the element).
Is there any reason this could be?
Here is a screenshot of the relevant code:
(I'll post a fiddle demonstrating the problem if I can figure out how to reproduce it)
The culprit was an errant display: inline that the .label was inheriting from its HTML counterpart.
The fix:
svg.label {
display: block;
}
I have a function that adds an imageOverlay and a semitransparent Rectangle on top of that image (so as to tint the image, and draw a keyline around it).
activeUserImage = new L.imageOverlay(imageUrl, imageBounds).addTo(map);
activeUserTile = new L.rectangle(imageBounds, {stroke: true, color: "#ffffff", opacity:1, weight: 1, fillColor: "#003572", fillOpacity: 0.7, clickable:true}).addTo(map);
this works great, but then I want to remove the image and rectangle with:
map.removeLayer(activeUserImage);
map.removeLayer(activeUserTile);
This seems to work well...
However when I try and add a second Image & Rectangle (using the same function) the rectangle SVG is being rendered underneath the image, so I don't see the colored overlay.
This seems to be because the element is being left behind from the first creation, and then when the image is being added a second time it appears in front of the SVG.
Q:
Is this a bug? Should the SVG element not be cleared too?
Can I adjust z-index of the image or SVG on creation?
should i be containing to rectangle in a different layer to the images? How?
Many Thanks
OK, so the Leaflet bringToFront() method didn't work, but instead I have used a bit of JQuery to force the same approach.
svgObj = $('.leaflet-overlay-pane svg');
svgObj.css('z-index', 9999);
This works, but still feels like a hack... however if (?) there is a bug in LEaflet, then maybe this will have to do???
Any better ideas?
The bringToFront() function alows you to bring layer to the top.
Search it in the docs.
I am using a drop shadow filter inside an SVG file that is embedded using an img tag. On my MacBook, it looks fine in Safari. However, in mobile Safari, the graphic gets really pixelated and loses all it's sharpness. When the filter is not applied, the SVG renders fine. Is there any way to fix that besides to pass on the filter?
This problem is still relevant in 2018, and I've found a solution. You can duplicate the element you give the filter to, place it below the actual element, and keep filter only on it, without any filter on the element. This way, Safari and other browsers will only rasterise the element with the shadow when resizing, however it will be hidden by the sharp-looking vector element. You can see examples and read more here.
Unfortunately I tried all the suggested workarounds for this, none of them worked, the only thing that worked for me was putting the svg inline, not as an img tag.
Surprised this issue appears to have been around for so long!
You should try explicitly setting the "filterRes" attribute of the filter to a value that matches retina displays.
It's 2021 and it's still relevant. I found a workaround that worked for me: You can enlarge the svg and then use a css-transform to scale it back:
.section_logo img {
height: 500%;
transform-origin: top left;
transform: scale(0.2);
}
See this fiddle:
http://jsfiddle.net/UfP3C/3/
Each list item contains an SVG element.
My goal is when the user hovers the list items, the Raphael animation occurs (for its child svg element).
I'm having the following issue:
JQuery.hover works fine when moving the mouse slowly. But, when you
quickly mouse across (and off) both list items (horizontally), the svg elements often get stuck in the "mouseenter" animate position.
I'm trying to figure out how to get the animation to work as expected: When quickly mousing across both list items, the end result is that the svg elements are in the "mouseleave" position.
The above fiddle demonstrates the issue (in FireFox 5 and Chrome 13).
I would recommend using Raphael's native mouseover and mouseout
They rapidly respond to these events
You will also be able to tightly bind the animation with the keyword "this"
See this fiddle for the solution:
http://jsfiddle.net/UfP3C/4/
To prevent the svg animation from freezing in the mouseenter animate postion, set the animate in and out time to be the same value:
list_item.hover(function() {
my_rectangle.animate({
y: 0
}, 400, 'bounce');
},function(){
my_rectangle.animate({
y: 200
}, 400, 'bounce');
});
In the above code, the animate time is 400. Setting both animate times to the same value solves the issue.
See the above fiddle for the full code.
Note that using the Raphael hover function instead of the JQuery hover function (with different animate times) still shows the same issue and has the same solution.