We Keep Coding

Overwrite style properties on select in OpenLayers

I want to reuse my basic style function to create an select style by overwriting some of the properties.
This approach is working for fill/stroke colors of linestrings, polygons and texts, but not for images (a circle in my case).
I don't want to create a new image since other properties should be retained.
var selectStyleFunction = function(feature, resolution) {
var style = styleFunction(feature, resolution)[0];
style.getImage().getFill().setColor("magenta");
console.log(style.getImage().getFill().getColor());
return [style];
};
In this fiddle you can see, that the above code doesn't change the feature style on selection although the log output is correct.
Is there any way to overwrite this property?

I found an answer to my question in the api dokumentation of openlayers. It was too obvious to find it in the first place.
https://openlayers.org/en/latest/apidoc/ol.style.Style.html
ol.style.Style
Container for vector feature rendering styles. Any changes made to the style or its children through set*() methods will not take effect until the feature or layer that uses the style is re-rendered.
So rendering is not triggered by the setters.

DrawImage doesn't show CSS styles

I'm trying to draw an img to a canvas. However, styles aren't carrying over, whether I set the style attribute or do it in the CSS.
Here's a JSFiddle showing what I'm trying to do.
I've also tried applying the styles to the canvas itself. This displays correctly, but when I perform canvas.toDataURL(...) it doesn't get the styles.
Is there some other way to apply styles to the generated data?

To apply filters to your canvas content, you can use the cutting-edge filter property, which uses the same syntax the CSS filter property. Before you draw your image, do
context.filter = "grayscale(1)";
And you can reset it for anything else you do in the future by
context.filter = "none";
Your filtered image will remain correctly filtered -- the filter property basically tells the canvas context, "Whatever I draw from now on should have this filter applied," so changes only affect future drawing operations.

How can I access the paper object created by raphael?

I'm working on an HTML display for some phylogenetic analysis. I create a div, and there's this lovely javascript package called jsPhyloSVG that draws me a nice tree in that div. That package uses raphael to do its drawing, but it doesn't return me the raphael paper object. I'd like to make a few additions to this image using raphael, but I don't know how because I don't have a reference to that paper object. I can access the svg that raphael generates, but is there some way to work backwards to find paper?
If that doesn't work, I could always just add circle or path objects directly to the svg using jquery, right?

Well, after most of a day smashing my head into a wall, I've solved my issue. It turns out you can reuse the paper object that has been created by some other library, if you can find a reference to the object itself. For anyone else that is using jsPhyloSVG, this can be found by:
var dataObject = {phyloxml: tree_data};
var phylocanvas = new Smits.PhyloCanvas(
dataObject,
'svgCanvas',
1000, 1000,
'circular'
);
var paper = phylocanvas.getSvg().svg;
You can then proceed as normal: paper.circle(100, 100, 15);.
What I think Ian was getting at, is that you cannot reuse the svg that has been created by raphael. I could always access that element, but using jQuery to append circle elements didn't work.
They would show up in the svg object in the inspection panel, but would not display on the screen. There are a few workarounds discussed in another question here, which mostly worked for me. However they broke the connection between the raphael object and the svg element on screen; most mouseover functionality stops working.

How to introduce scroll in svg

The SVG elements like rect,img are placed inside svg tag. Dynamically i am placing foreign object inside svg tag. The size of foreign object is greater then the svg element size. how can i introduce a scroll in svg so that the foregin object would be visible to user.

You would need to use the overflow property of the element's style:
http://www.w3schools.com/jsref/prop_style_overflow.asp

javascript to change colour of an svg shape

Hi is there a way of using javascript for example using buttons to change colour of an svg shape? If so could someone please guide me in the right direction thanks

If you have a number of these shapes, then look at the d3 library, which is designed explicitly to allow you to bind data to svg attributes. A good explanation of the way it works is the Three little circles tutorial.
If you want to just change an attribute of an svg shape on a button click, then you need an onclick handler for the button:
function handleClick() {
// code to modify svg here, e.g.:
document.getElementById('svgShapeId').setAttribute('cx',150);
}
document.getElementById('buttonId').onclick = handleClick;

Here's an example of using JS to create animation elements to highlight colors based on mouse over/out:
http://phrogz.net/SVG/change-color-on-hover.svg
Here's an example of an SVG that changes lots of colors, and house some silly mouseover buttons:
http://phrogz.net/SVG/rgbhsv.svg
Here's an example that shows SVG in XHTML, with both native HTML widgets (an HTML5 slider) as well as draggable SVG elements (the path handles):
http://phrogz.net/SVG/area_of_path.xhtml
In general:
Find elements
Attach event handlers
In the event handlers, adjust properties (either via setting XML attributes or via the SVG DOM)