How to determine which path element clicked in FXG file - apache-flex
I am working on a sample map application using Flex 4/fxg? Now I have got FXG paths held in Group elements with id's( I have assigned path's id's to the corresponding group container)? But when I click anywhere in the map, I do not get the clicked group as target/currentTarget in event handler.
How to determine which element is clicked?
Code sample:
<Graphic xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:view="view.*"
version="2.0" viewWidth="1425" viewHeight="1140">
----
----
<view:GraphicItem id="CityofLondon">
<Path data="path data" winding="evenOdd">
<fill>
<SolidColor color="#FEFEE9" alpha="1"/>
</fill>
<stroke>
<SolidColorStroke color="#646464" alpha="1" weight="2" miterLimit="10" joints="round" caps="round"/>
</stroke>
</Path>
</view:GraphicItem>
<view:GraphicItem id="BarkingandDagenham">
<Path data="path data" winding="evenOdd">
<fill>
<SolidColor color="#FEFEE9" alpha="1"/>
</fill>
<stroke>
<SolidColorStroke color="#646464" alpha="1" weight="2" miterLimit="10" joints="round" caps="round"/>
</stroke>
</Path>
</view:GraphicItem>
----
------
</Graphic>
GraphicItem is Group container.
Any help would be greatly appreciated. Thanks.
I asked a similar question, and it is answered here:
Flex Path - capturing Click event
Had to set the mouseEnabledWhereTransparent="false" to a Group, and add the FXG path to that group.
Related
SVG with marker having an issue on mouse over
I have a button with svg inside like:
<button>
Checkout
<ArrowSvg />
</button>
And ArrowSvg looks like this (line has class: svg-line):
<svg fill="none" stroke="#000">
<defs>
<marker id="m" overflow="visible">
<path d="M-4,-4L0,0 -4,4" />
</marker>
</defs>
<line x1="0" y1="50%" x2="100%" y2="50%"marker-end="url(#m)" class="svg-line" />
</svg>
When button is hovered, I change the stroke color:
btn:hover > .svg-line {
stroke: blue;
}
It's working well - when I hover the button, the arrow (line and arrow head) turns blue.
But when I display the multiple buttons (more than 1), hovering 1 button affects arrows in other buttons. The arrow head part (which is marker/path in svg?) of all the buttons get affected when hovering the first button.
I am also working with the arrow width, so I need line. I can't make everything with path because I won't be able to expand the arrow width.
Am I missing anything? Why am I seeing this issue?
Wrap it in a native JS Web Component, supported in all modern browsers, to create the <svg>
because every SVG requires a unique marker ID
note: the SVG is created for every instance, no need for a marker at all, use the path by itself
customElements.define("svg-button",class extends HTMLElement{
connectedCallback(){
let id = "id" + (Math.floor(Math.random() * 1e10));
let stroke = this.getAttribute("stroke") || "#000";
this.innerHTML = `
<button>
Checkout
<svg fill="none" stroke="${stroke}" viewBox="0 0 10 10">
<defs>
<marker id="${id}" overflow="visible">
<path d="M-4,-4L0,0 -4,4"/>
</marker>
</defs>
<line x1="0" y1="5" x2="9" y2="5" marker-end="url(#${id})"/>
</svg>
</button>`
}
});
<style>
button:hover svg {
stroke:gold;
}
</style>
<svg-button></svg-button>
<svg-button stroke="red"></svg-button>
<svg-button stroke="green"></svg-button>
<svg-button stroke="blue"></svg-button>
What you are writing looks like .JSX syntax, but the question is lacking a react tag. I will assume it for this answer anyway, but other frameworks using the format will probably work comparably.
All you need is a unique id for the <marker> element. This is easily done if you spell out the <ArrowSvg> as a function. Then, wrap it in a factory function to form a closure over a running number:
const ArrowSvg = (() => {
let id = 0;
return function (props) {
return (
const ref = 'arrowMarker' + ++id;
<svg fill="none" stroke="#000">
<defs>
<marker id=(ref) overflow="visible">
<path d="M-4,-4L0,0 -4,4" />
</marker>
</defs>
<line x1="0" y1="50%" x2="100%" y2="50%"
marker-end=(`url(#${ref})`) class="svg-line" />
</svg>
);
}
})();
Having many SVG DomMarkers in HERE maps causes lag
I'm using HERE maps 3.0 (also tried 3.1 and have the same issue) with the default layers in an angular project. The map has DomMarkers using a complex SVG icon with many paths inside a div.
I noticed that adding many markers (over 200) causes a lag when zooming or moving around the map.
I'm using SVG instead of static image files to be able to change the colour and modify the shape of the icon before adding it to the map.
Using a dom icon with multiple divs shaped with CSS instead of the SVG, results in the same lag.
If I use a more simple SVG or a simple div, the lag is reduced significantly.
What's causing the lag? Is it caused by the complexity of the SVG, or the large and many paths it has?
Is there a way to have complex SVG markers and eliminate the lag?
My SVG:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-656 895.2 221.2 259.8" style="enable-background:new -656 895.2 221.2 259.8;" xml:space="preserve">
<g>
<path fill="white" d="M-489.9,937.4c-15.8-16.3-36.6-25.3-58.5-25.3c-46.8,0-84.8,41.1-84.8,91.6c0,13.3,2.5,25.9,7.4,37.2
c12.9,30.9,48.3,84.6,68,109.5c2.3,2.9,5.7,4.6,9.4,4.6c3.5,0,6.7-1.5,9.1-4.2l0.1-0.2l0.1-0.2c19.5-24.5,54.8-77.9,68-109.4
c4.9-11.9,7.3-24.4,7.3-37.1C-463.6,978.7-472.9,954.9-489.9,937.4z M-478.3,1037.8c-12.5,29.9-47,82.5-66.8,107.4
c-0.9,1-2,1.6-3.3,1.6c-1.3,0-2.5-0.6-3.3-1.6c-19.7-24.9-54.3-77.6-66.8-107.6c-4.5-10.5-6.7-21.9-6.7-34
c0-46,34.5-83.5,76.9-83.5s76.9,37.4,76.7,83.7C-471.6,1015.9-473.9,1027.4-478.3,1037.8z"/>
<path fill="#775DD0" d="M-548.3,920.4c-42.4,0-76.9,37.4-76.9,83.5c0,12,2.2,23.4,6.7,34c12.5,30,47.1,82.6,66.8,107.6
c0.8,1,2,1.6,3.3,1.6c1.3,0,2.4-0.6,3.3-1.6c19.9-24.8,54.4-77.5,66.9-107.5c4.4-10.6,6.7-22.1,6.7-34
C-471.4,957.7-505.9,920.4-548.3,920.4z"/>
</g>
<g>
<path fill="white" d="M-454.5,1067.8h-47.8c-10.9,0-19.7,8.9-19.7,19.7v47.8c0,10.9,8.9,19.7,19.7,19.7h47.8
c10.9,0,19.7-8.9,19.7-19.7v-47.8C-434.8,1076.7-443.6,1067.8-454.5,1067.8z M-444.8,1135.4c0,5.4-4.3,9.7-9.7,9.7h-47.8
c-5.4,0-9.7-4.4-9.7-9.7v-47.8c0-5.4,4.3-9.7,9.7-9.7h47.8c5.3,0,9.7,4.4,9.7,9.7V1135.4z"/>
<path fill="#775DD0" d="M-454.5,1077.8h-47.8c-5.4,0-9.7,4.4-9.7,9.7v47.8c0,5.4,4.3,9.7,9.7,9.7h47.8c5.4,0,9.7-4.4,9.7-9.7v-47.8
C-444.8,1082.2-449.2,1077.8-454.5,1077.8z"/>
<path fill="white" d="M-461.6,1094.7l-22,24.8l-11-12.4c-2-2.2-5.3-2.2-7.4,0c-2,2.2-2,6,0,8.3l14.7,16.5
c2,2.2,5.3,2.2,7.4,0l25.7-29c2.1-2.3,2.1-6.1,0-8.3C-456.2,1092.4-459.5,1092.4-461.6,1094.7z"/>
</g>
<g>
<path fill="white" d="M-478.1,941.6c-6.7,0-19.9,3.7-20,10.3c4.3,6.5,11.7,10.7,20,10.7s15.7-4.3,20-10.7
C-458.2,945.2-471.5,941.6-478.1,941.6z M-478.1,952.6c-1.3,0-2.6-0.2-3.9-0.6c1.4-0.3,2.7-0.5,3.9-0.5s2.5,0.2,3.9,0.5
C-475.5,952.4-476.8,952.6-478.1,952.6z"/>
<path fill="white" d="M-478.1,895.2c-23.9,0-43.3,19.4-43.3,43.4s19.4,43.3,43.3,43.3s43.3-19.4,43.3-43.3S-454.2,895.2-478.1,895.2
z M-478.1,971.9c-18.4,0-33.3-14.9-33.3-33.4c0-18.4,14.9-33.3,33.3-33.3s33.3,14.9,33.3,33.3C-444.8,957-459.7,971.9-478.1,971.9z
"/>
<path fill="white" d="M-478.1,935.2c5.5,0,10-4.5,10-10c0-5.5-4.5-10-10-10s-10,4.5-10,10C-488.2,930.7-483.7,935.2-478.1,935.2z"/>
<path d="M-478.1,905.2c-18.4,0-33.3,14.9-33.3,33.3c0,18.4,14.9,33.4,33.3,33.4s33.3-14.9,33.3-33.4
C-444.8,920.1-459.7,905.2-478.1,905.2z M-478.1,915.2c5.5,0,10,4.5,10,10c0,5.5-4.5,10-10,10s-10-4.5-10-10
C-488.2,919.7-483.7,915.2-478.1,915.2z M-478.1,962.6c-8.4,0-15.7-4.3-20-10.7c0.1-6.6,13.4-10.3,20-10.3s19.9,3.7,20,10.3
C-462.5,958.3-469.8,962.6-478.1,962.6z"/>
</g>
<g>
<path fill="white" d="M-572.4,927.7c0.3-1,0.5-2.1,0.5-3.2c0-2.7-1.1-5.2-2.9-7.1l-4.8-4.7c-1.2-1.2-2.7-2-4.2-2.5
c-0.5-1.5-1.3-3-2.5-4.2l-4.7-4.8c-1.9-1.9-4.4-2.9-7.1-2.9c0,0,0,0,0,0c-1.1,0-2.2,0.2-3.2,0.5c-1.8-2.2-4.6-3.6-7.7-3.6h-6.7
c-3.1,0-5.9,1.4-7.7,3.6c-1-0.3-2.1-0.5-3.2-0.5c0,0,0,0,0,0c-2.7,0-5.2,1.1-7.1,2.9l-4.7,4.8c-1.2,1.2-2,2.7-2.5,4.2
c-1.5,0.5-3,1.3-4.2,2.5l-4.8,4.7c-1.9,1.9-2.9,4.4-2.9,7.1c0,1.1,0.2,2.2,0.5,3.2c-2.2,1.8-3.6,4.6-3.6,7.7v6.7
c0,3.1,1.4,5.9,3.6,7.7c-0.3,1-0.5,2.1-0.5,3.2c0,2.7,1.1,5.2,2.9,7.1l4.8,4.7c1.2,1.2,2.7,2,4.2,2.5c0.5,1.5,1.3,3,2.5,4.2
l4.7,4.8c1.9,1.9,4.4,2.9,7.1,2.9c0,0,0,0,0,0c1.1,0,2.2-0.2,3.2-0.5c1.8,2.2,4.6,3.6,7.7,3.6h6.7c3.1,0,5.9-1.4,7.7-3.6
c1,0.3,2.1,0.5,3.2,0.5c0,0,0,0,0,0c2.7,0,5.2-1.1,7.1-2.9l4.7-4.8c1.2-1.2,2-2.7,2.5-4.2c1.5-0.5,3-1.3,4.2-2.5l4.8-4.7
c1.9-1.9,2.9-4.4,2.9-7.1c0-1.1-0.2-2.2-0.5-3.2c2.2-1.8,3.6-4.6,3.6-7.7v-6.7C-568.8,932.3-570.2,929.6-572.4,927.7z
M-578.8,942.2h-14l10.9,10.9l-4.8,4.7l-15.6-15.6h-6.7v6.7l15.6,15.6l-4.7,4.8l-10.9-10.9v14h-6.7v-14l-10.9,10.9l-4.7-4.8
l15.6-15.6v-6.7h-6.7l-15.6,15.6l-4.8-4.7l10.9-10.9h-14v-6.7h14l-10.9-10.9l4.8-4.7l15.6,15.6h6.7v-6.7l-15.6-15.6l4.7-4.8
l10.9,10.9v-14h6.7v14l10.9-10.9l4.7,4.8l-15.6,15.6v6.7h6.7l15.6-15.6l4.8,4.7l-10.9,10.9h14V942.2z"/>
<polygon points="-581.9,924.5 -586.7,919.8 -602.3,935.4 -609,935.4 -609,928.7 -593.4,913.1 -598.1,908.3 -609,919.2 -609,905.2
-615.8,905.2 -615.8,919.2 -626.7,908.3 -631.4,913.1 -615.8,928.7 -615.8,935.4 -622.5,935.4 -638.1,919.8 -642.9,924.5
-632,935.4 -646,935.4 -646,942.2 -632,942.2 -642.9,953.1 -638.1,957.8 -622.5,942.2 -615.8,942.2 -615.8,948.9 -631.4,964.5
-626.7,969.3 -615.8,958.4 -615.8,972.4 -609,972.4 -609,958.4 -598.1,969.3 -593.4,964.5 -609,948.9 -609,942.2 -602.3,942.2
-586.7,957.8 -581.9,953.1 -592.8,942.2 -578.8,942.2 -578.8,935.4 -592.8,935.4 "/>
</g>
<g>
<path fill="white" d="M-537.3,987.5c-1.9,0-3.4,1.5-3.4,3.4c0,1.9,1.5,3.4,3.4,3.4c1.9,0,3.4-1.5,3.4-3.4
C-533.9,989-535.4,987.5-537.3,987.5z"/>
<path fill="white" d="M-557.5,987.5c-1.9,0-3.4,1.5-3.4,3.4c0,1.9,1.5,3.4,3.4,3.4s3.4-1.5,3.4-3.4
C-554.2,989-555.7,987.5-557.5,987.5z"/>
<path fill="white" d="M-513.8,997.6c0-6.7-2.1-13.3-5.8-18.8l0.3-0.3c3.9-3.9,3.9-10.2,0-14.1l-2.8-2.8c-1.9-1.9-4.4-2.9-7.1-2.9
s-5.2,1.1-7.1,2.9l-3.3,3.3c-2.6-0.6-5.2-1-7.9-1c-2.7,0-5.3,0.3-7.9,1l-3.3-3.3c-2-2-4.5-2.9-7.1-2.9s-5.1,1-7.1,2.9l-2.8,2.8
c-3.9,3.9-3.9,10.2,0,14.1l0.3,0.3c-3.7,5.5-5.8,12-5.8,18.8v3.4c0,0.6,0,1.1,0.1,1.7c-0.1,0.5-0.1,1.1-0.1,1.7v13.5
c0,18.5,15.1,33.6,33.6,33.6s33.6-15.1,33.6-33.6v-13.5c0-0.6,0-1.1-0.1-1.7c0.1-0.5,0.1-1.1,0.1-1.7V997.6z M-523.8,1017.9
c0,13.1-10.6,23.6-23.6,23.6c-13.1,0-23.6-10.6-23.6-23.6v-13.5h47.3V1017.9z M-523.8,1001H-571v-3.4c0-7.8,3.9-14.7,9.7-19
l-7.1-7.1l2.8-2.8l7.8,7.8c3.2-1.6,6.7-2.5,10.5-2.5s7.3,1,10.5,2.5l7.8-7.8l2.8,2.8l-7.1,7.1c5.9,4.3,9.7,11.2,9.7,19V1001z"/>
<path fill="#775DD0" d="M-571,1017.9c0,13.1,10.6,23.6,23.6,23.6c13.1,0,23.6-10.6,23.6-23.6v-13.5H-571V1017.9z"/>
<path fill="#775DD0" d="M-533.5,978.6l7.1-7.1l-2.8-2.8l-7.8,7.8c-3.2-1.6-6.7-2.5-10.5-2.5s-7.3,1-10.5,2.5l-7.8-7.8l-2.8,2.8l7.1,7.1
c-5.9,4.3-9.7,11.2-9.7,19v3.4h47.3v-3.4C-523.8,989.8-527.6,982.9-533.5,978.6z M-557.5,994.2c-1.9,0-3.4-1.5-3.4-3.4
c0-1.9,1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4C-554.2,992.7-555.7,994.2-557.5,994.2z M-537.3,994.2c-1.9,0-3.4-1.5-3.4-3.4
c0-1.9,1.5-3.4,3.4-3.4c1.9,0,3.4,1.5,3.4,3.4C-533.9,992.7-535.4,994.2-537.3,994.2z"/>
</g>
</svg>
The markers are added from a for loop to a group (H.map.Group) that was already added in the map. The lag is happening not while loading the markers, but when trying to move around the map or zoom in and out. It's very laggy especially when zoomed out and many markers are visible.
adding the group in the map:
this.map.addObject(this.markerGroup);
adding a marker:
addMarker(data) {
const id = data.id;
if (!mapObjects[id]) {
let coords;
coords = { lat: data.lat, lng: data.lon };
const icon = new H.map.DomIcon(this.createMarkerIcon(data));
this.mapObjects[id] = new H.map.DomMarker(coords, { icon: icon });
this.mapObjects[id].setData(data);
this.markerGroup.addObject(this.mapObjects[id]);
} else if (this.markerChanged(data)) {
this.updateMarker(data);
}
}
loop that adds the markers:
markers.forEach(markerData => {
this.addMarker(markerData);
});
edit: svg added, snippets added
Caching could help you to avoid this zoom out lag. reading larger marker data again and again with complex svg making it laggy. you can try to store the markers in one variable and cache it if the data is not changing all the time, like below
var testObject = { 'one': 1, 'two': 2, 'three': 3 };
// Put the object into storage
localStorage.setItem('testObject', JSON.stringify(testObject));
// Retrieve the object from storage
var retrievedObject = localStorage.getItem('testObject');
The problem was that I used H.map.DomMarker instead of H.map.Marker and the many html elements caused the map to lag. H.map.Markers are rendered on the map and don't cause zooming and moving lag.
How to incorporate svg path morph animation into a React app
I can't manage to animate a smooth transition between two similar <path />'s There's this background effect I try to manage in my React app, where you have some blobs floating around that need to deform over time. I've created two blob shapes and tried to animate them via svg <animate /> tag but it only shifts momentarily from one shape to another after set dur property. I've tried a few libraries like "react-spring" or react-something-svg (there's quite a stack of them out there) but the best I got was to have a path only morph animation with no fill or gradient properties. Two shapes to shift between: <svg> <defs> <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse"> <stop stop-color="#00f" offset="0"/> <stop stop-color="#00f3ff" offset="1"/> </radialGradient> </defs> <g transform="translate(-67.756 -51.842)"> <path id="blob" transform="matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c1.008-6.2604 4.104-12.132 8.5366-16.666s10.166-7.7395 16.293-9.3701c12.256-3.2613 25.688-0.11296 36.296 6.8373 10.608 6.9503 18.58 17.4 24.228 28.755 5.6488 11.355 9.1245 23.653 12.182 35.961 3.0568 12.306 5.7394 24.802 6.0332 37.479 0.29383 12.677-1.9195 25.642-8.1354 36.694-3.1079 5.5261-7.1991 10.523-12.159 14.473-4.9595 3.9497-10.796 6.8358-17 8.1437s-12.77 1.0114-18.756-1.0776c-5.9861-2.089-11.361-5.9944-15.007-11.181-3.1833-4.5287-5.0021-9.9148-5.8599-15.383-0.85782-5.4687-0.79005-11.042-0.45735-16.567 0.6654-11.051 2.3656-22.3-0.18511-33.073-2.7384-11.566-10.084-21.385-16.303-31.514-3.1096-5.0645-5.9863-10.317-7.8786-15.95-1.8923-5.6336-2.7725-11.692-1.8278-17.56z" fill="url(#radialGradient827)" stroke-width="0"/> </g> </svg> <svg> <defs> <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse"> <stop stop-color="#00f" offset="0"/> <stop stop-color="#00f3ff" offset="1"/> </radialGradient> </defs> <g transform="translate(-60.376 -63.391)"> <path id="blob" transform="matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" fill="url(#radialGradient827)" stroke-width="0"/> </g> </svg> Here's a sandbox to play around: click here I want to understand how to morph between two svg paths with a slow transition and having my gradient applied without using some specialized react animation library and incorporate it into my React app. All I can do for now is to morph between to unstyled shapes using quite a few libraries and to shift from one shape to another momentarily
You can make the blobs preserve their final shape after the animation by specifying the fill property of the <animation> tag: <?xml version="1.0" encoding="UTF-8"?> <svg version="1.1" viewBox="0 0 141 231" xmlns="http://www.w3.org/2000/svg" > <radialGradient id="radialGradient827" cx="105.22" cy="144.2" r="51.989" gradientTransform="matrix(.23275 1.7456 -.93805 .12507 214.81 -67.26)" gradientUnits="userSpaceOnUse"> <stop stop-color="#00f" offset="0"/> <stop stop-color="#00f3ff" offset="1"/> </radialGradient> <path id="blob" transform="translate(-60.376 -63.391) matrix(1.3569 0 0 1.3569 -2.3105 -31.738)" d="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" fill="url(#radialGradient827)" stroke-width="0"> <animate attributeName="path" to="m52.019 88.923c5.9206-9.9143 16.696-16.529 28.107-18.297 11.411-1.7677 23.305 1.0814 33.237 6.9726 9.9318 5.8912 17.964 14.688 23.862 24.615 5.898 9.9278 9.7369 20.973 12.329 32.226 2.527 10.969 3.9032 22.276 3.0655 33.502-0.83773 11.225-3.9548 22.389-9.9198 31.935-5.965 9.5462-14.884 17.395-25.477 21.204s-22.841 3.3361-32.693-2.1096c-5.4164-2.9941-10.001-7.3752-13.622-12.394-3.6211-5.019-6.3053-10.669-8.3576-16.508-4.1048-11.677-5.7091-24.058-8.4789-36.122-2.4949-10.866-5.9526-21.549-7.3169-32.614-1.3643-11.065-0.45314-22.838 5.2631-32.41z" dur="1s" fill="freeze" /> </path> </svg> NOTE: For the animation to work you need to ensure that both the initial and the final path have the same number of points, as detailed in here. Here's a great tool to make sure that the animation is possible. On regards to your gradient, the browser should take care of that. You can simply apply it as you would on any other SVG file. Avoiding JS libraries to deal with SVG animation is a great move, those tend to be bloated and messy. Stick to the official SVG specs whenever possible.
Why is this background image not working for this SVG?
I want to create this triangular/polygonal shape using SVGs and assign it a background image.
<svg class="svg-graphic" width="100%" height="100%" class="svg-graphic" viewBox="0 0 100 100" >
<defs>
<pattern id="image" x="0" y="0" patternUnits="userSpaceOnUse" height="1" width="1">
<image x="0" y="0" xlink:href="http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg"></image>
</pattern>
<polygon points="0, 0, 100, 0, 50, 50" fill="url('http://25.media.tumblr.com/fe6e34ef00254f2bd05451f525b02324/tumblr_mw8osqc77F1qdrz3yo3_500.jpg')"/>
</defs>
</svg>
Very similar to this question here:
Happy Chanukkah
The problem is the fill="#url"
you have to give the polygon/path a class and then from that class, assign the background image (that's already defined in the defs):
.imageFill {
fill: url(#image);
}
The fill attribute references the pattern, in your case it's url(#image) (like you'd do in CSS). Repeating the image's URL is pointless there. See the accepted answer in the question you linked to. Apart from that you must make sure, that the view box spanned by the <pattern> actually matches the shape it shall be applied to. See this updated fiddle: http://jsfiddle.net/boldewyn/k7Rk9/12/
Degrafa:GraphicBorderSkin not working as canvas background via: borderSkin: ClassReference
Degrafa newbie here :-).
I was able to get "com.degrafa.skins.CSSSkin" to create linear gradient backgrounds. Now I'm getting into more advanced stuff as I try to figure out radial gradients...
I figured this out by watching Flex-skinning-with-degrafa-screencast but my code isn't working for me and I'm getting a white background on my canvas.
Here is the code I have so far:
I have a MXML component ThreeWayGrad.mxml which extends Canvas and has a styleName for ThreeWayGradient:
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
styleName="ThreeWayGradient"/>
I have a CSS style entry for ThreeWayGradient with a skin tag for the class RadialGradient:
Canvas.ThreeWayGradient
{
borderSkin: ClassReference("assets.skins.RadialGradient");
}
And finally here is the RadialGradient.mxml component:
<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://www.degrafa.com/2007">
<mx:Script>
<![CDATA[
[Bindable] private var _height:Number = 0;
[Bindable] private var _width:Number = 0;
override protected
function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
_height = h;
_width = w;
trace("INFO: displaylist updated --" + _height + " : " + _width );
}
]]>
</mx:Script>
<strokes>
<SolidStroke id="mainStroke" color="#333333" weight="3"/>
</strokes>
<fills>
<RadialGradientFill
id="blueGradient"
angle="45"
focalPointRatio="0">
<GradientStop
alpha="1"
ratio=".25"
color="#ffffff"/>
<GradientStop
alpha="1"
ratio=".70"
color="#003355"/>
<GradientStop
alpha="1"
ratio="1"
color="#111111"/>
</RadialGradientFill>
</fills>
<!-- Creating the background -->
<geometry>
<GeometryComposition>
<!-- Creating a Rectangle to draw the gradient to and
moving the center of the gradient to the lower left corner -->
<RegularRectangle
fill="{blueGradient}"
stroke="{mainStroke}"
height="{_height}"
width="{_width}"
/>
</GeometryComposition>
</geometry>
</GraphicBorderSkin>
Does anyone know why this isn't working? I see the trace output with the correct sizes, so I know the class is getting called.
I also copied this code into a new Application using a Surface instead of GraphicBorderSkin element and GeometryGroup instead of GeometryComposition, and it works. Anyway I'm sure I'm missing something simple and thanks in advance!!!
You should be able to use skin code like this (skinWidth and skinHeight are exposed inside the GraphicBorderSkin so you don't need to override updateDisplayList and specify additional local variables for width and height):
<?xml version="1.0" encoding="utf-8"?>
<GraphicBorderSkin
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="http://www.degrafa.com/2007">
<strokes>
<SolidStroke id="mainStroke" color="#333333" weight="3"/>
</strokes>
<fills>
<RadialGradientFill
id="blueGradient"
angle="0"
focalPointRatio="0">
<GradientStop
alpha="1"
ratio=".25"
color="#ffffff"/>
<GradientStop
alpha="1"
ratio=".70"
color="#003355"/>
<GradientStop
alpha="1"
ratio="1"
color="#111111"/>
</RadialGradientFill>
</fills>
<!-- Creating the background -->
<geometry>
<!-- Creating a Rectangle to draw the gradient to and
moving the center of the gradient to the lower left corner -->
<RegularRectangle id="rect"
fill="{blueGradient}"
stroke="{mainStroke}"
height="{skinHeight}"
width="{skinWidth}"
/>
<!-- Alernative: <RegularRectangle fill="{blueGradient}" stroke="{mainStroke}" height="100%" width="100%"/> -->
</geometry>
</GraphicBorderSkin>
In this case, you don't need a GeometryComposition enclosing the RegularRectangle. I also discussed this with Jason Hawryluk (Degrafa architect) and he pointed out the alternative way to specify via Geometry's layout support - see the commented markup "Alternative" for the layout driven example.
And for the Canvas, you need to specify a width and height setting for it to draw:
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml" width="50%" height="50%"
styleName="ThreeWayGradient"/>