[Blama]

Hi Isomorphic,

Note that the issue you report in post #18 (item 7) cannot be easily solved in our Framework at this time. In order to address the problem of the SVG swallowing events for button clicks, etc., we need to set the "pointer-events: none" attribute on the <object> tag in the containing page. However, this has the impact of also preventing any "hover" events from triggering the CSS in the SVG. (That's why you appeared to see a regression when the other problem got fixed.)

So instead of using CSS in your SVG like:

svg:hover > path {fill: red !important;}

you'll need to define your XXX_Over.svg variant to apply the hover style. You could either have that SVG apply a different CSS sheet, or set a class attribute on its <svg> tag that you then key off in a common CSS.

Too bad, as this would have been one of the big improvements - only needing one image file instead of many (_Over, _Disabled, etc.)
But this way it will still be more easy to color the images on hover in a customer color.

Similarly, this CSS won't work,

.imgButtonOver > svg > path {fill: red !important;}

because the CSS classes applied to the <object> tag or its parent <divs> in the containing page don't jump the doc boundary. The solution is the same as for the other problem.

This is what I already wrote in this enhancement suggestion. If you included the SVG in the DOM directly, this should then work. I did not test the different ways of doing so (dump svg text vs base64-Data-URI, if possible), yet.

Best regards
Blama

[Blama]

Hi Isomorphic,

I'm now copying the images for _Over etc. and linking a stylesheet from there like you do in your sample. The stylesheet is actually a JSP and dynamically returns a color code. This way I have some files more than needed in the best case, but this is actually not important.

It seems though, there is still a subtle but annoying difference between SVG (as <object>) and PNG (as <img>) left.

Please see this modified testcase (v11.1p_2018-04-06):

isc.IButton.create({
    title: "Hello",
    icon: "icons/16/world.png",
    iconOrientation: "right",
    click: "isc.say('Hello world!')"
})
isc.IButton.create({
    top: 50,
    title: "Hello",
    icon: "[SKINIMG]NavigationBar/miniNav_up.svg",
    iconOrientation: "right",
    click: "isc.say('Hello world!')"
})

As you can see in the video below, hovering the SVG causes a request, served from cache, and also an annoying flickering of the image. Both do not happen for the PNG.



Best regards
Blama

[Blama]

Hi Isomorphic,

could you explain how to test/use this feature?

There's already a (currently undocumented) flag to force <image> to be used rather than <object> (the previous behavior).

Can you also explain this? I'm pretty sure I won't use it as I need the _Over-versions anyway, but it would be good to know.

If you mean you want a way to disable the "pointer-events: none" CSS so that hover CSS in your SVG works (fixing your cursor as well), that would be easy enough and would perhaps work for an Img, but for a ImgButton it may not make much sense, as it would mean the Framework wouldn't get any clicks.

Thank you & Best regards
Blama

[Isomorphic]

We're looking into how to mitigate some of the unwanted browser behavior you've pointed out above for SVG in <object> tags, but note that if you're actually switching what svg the <object> references, such as occurs for the different states of an ImgButton, the flickering is probably normal browser behavior that may not be simple to hide.

Hi Isomorphic,
could you explain how to test/use this feature?

You can set Canvas.useImageForSVG: true to get the old behavior back of rendering SVG in an <image> tag. This was an undocumented attribute but we'll expose it now.

Hi Isomorphic,
could you explain how to test/use this feature?
Can you also explain this? I'm pretty sure I won't use it as I need the _Over-versions anyway, but it would be good to know.

There is not currently any way to disable the "pointer-events: none" CSS if you want an <object> tag, but we were suggesting that we could add that capability, except for ImgButtons where it doesn't seeem to make sense - since then you wouldn't be able to click on it.

[Blama]

Hi Isomorphic,

We're looking into how to mitigate some of the unwanted browser behavior you've pointed out above for SVG in <object> tags, but note that if you're actually switching what svg the <object> references, such as occurs for the different states of an ImgButton, the flickering is probably normal browser behavior that may not be simple to hide.

This is not what is happening. In the video you can see that the URL stays the same. No _Over or similar suffix. It just re-requests the same file, perhaps the DOM object is removed and added again?

There is not currently any way to disable the "pointer-events: none" CSS if you want an <object> tag, but we were suggesting that we could add that capability, except for ImgButtons where it doesn't seem to make sense - since then you wouldn't be able to click on it.

I do think that such a setting would be useful in edge cases, but only as option on Canvas, like the useImageForSVG you mentioned. That way, one could have the SVG-CSS-:hover effects, if a click is not needed. I personally don't have a use case for this right now, as an "Over" action means it is an active GUI element and here the user will also expect to be able to click it.
If there is a way to bubble the click from the <object> to the main Layout-object, this would be very useful, but I don't know this and assume it is not the case.
The full solution, that most likely will also make this option unnecessary, is this enhancement suggestion.

Best regards
Blama

[Isomorphic]

This is not what is happening. In the video you can see that the URL stays the same. No _Over or similar suffix. It just re-requests the same file, perhaps the DOM object is removed and added again?

Yes, we're aware of that, and the specific situation from your sample code likely can be prevented. However, we wanted to set expectations in case you were hoping that all cases of flickering would be addressed quickly.

[Isomorphic]

The fix for the issue in post #32 should be in today's builds, dated 2018-04-16, for SGWT 6.1p/11.1p and newer releases (the only ones affected).

[Blama]

Hi Isomorphic,

I can see this is fixed in the sample using v11.1p_2018-04-17 and I'm pretty sure it will also fix the issue in my application.

Thanks a lot,
Blama

[ICPP]

My problems with regard to clicking and the pointer are fixed using the latest version (v11.1p_2018-04-17), thanks! The scaling issue can be worked around with useImageForSVG but I'll give reproduction code for completeness' sake:

isc.Button.create({
    useImageForSVG: false,
    icon: "https://upload.wikimedia.org/wikipedia/commons/0/07/Tango-style_info_icon.svg"
})

Flip the flag and you'll see how it should have been rendered (and how it was rendered before rendering svg-images with <object>). Chrome 65.0.3325.181 and Firefox 59.0.2.

[Blama]

Hi ICPP,

just FYI, the problem seems to be with the svg file, which does not scale. See this example:

isc.Img.create({
    useImageForSVG: false,
    size: 200,
    src: "https://upload.wikimedia.org/wikipedia/commons/0/07/Tango-style_info_icon.svg"
});

isc.Img.create({
    top: 200,
    useImageForSVG: false,
    size: 200,
    src: "[SKINIMG]NavigationBar/miniNav_up.svg"
})

But I agree that you should turn the feature off to get back your behavior. The advantage of the <object> is only that you can style the SVG with external CSS. If you don't do this, I believe <img> will be better, as it is faster (which seems to be a browser problem).

Isomorphic: Because of the sample ICPP showed, it might be a good idea to default this to true, in order to have the old behavior back for those users. I can set it to true in my load_skin.js.

Best regards
Blama

[Isomorphic]

Hi Isomorphic,
Too bad, as this would have been one of the big improvements - only needing one image file instead of many (_Over, _Disabled, etc.)
But this way it will still be more easy to color the images on hover in a customer color.

We've made an improvement in SGWT/SC 12.1d so that events are actively forwarded from the SVG by handlers, which allows us to avoid writing out the "pointer-events:none" CSS. This should be in today's nightly builds dated 2018-08-22.

So hover CSS should now work when writing SVG into an object tag, and in your code from post #18, the hover CSS should work now - of course you'll have to manually suppress any state change (and the required extra SVG files) that you don't want via setShowRollOver(false) or similar.