I am trying to render SVG graphics in run-time with no success. Only works if i put the SVG code inside the component's template.
I have tried it using the ComponentFactoryResolver and the ViewContainerRef's method createComponent. After that, the Renderer class (i'm trying to not use the nativeElement due the recommendations from Angular team), adding the namespace before the tagname: <svg:rect> and the selector property selector: ':svg:g[svg-box]'...
I am using Angular 2.0.0-rc.5. You can check it here https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview
In both cases the generated HTML code is correct but it doesn't render anything.
Any ideas?
Thank you.
Finally i got it!!
Using the Renderer class, when we create SVG elements we have to add the following before the element's tag: :svg:tag. In my case:
this.SVGRenderer.createElement(this.parent.nativeElement, ":svg:rect");
You can check it in this plunker's version 3: https://plnkr.co/edit/HsqyQgFGwiIVVJIPu31k?p=preview
Now i'm trying to do the same using the ComponentFactoryResolver and the ViewContainerRef's method createComponent approach.
Related
As flagged in the following GitHub issues, OpenLayers do not display SVG images properly when referenced in an ImageLayer:
https://github.com/openlayers/openlayers/issues/4633
There was a solution to this implemented a few months ago, using the "render" property in the Layer class:
https://openlayers.org/en/master/apidoc/module-ol_layer_Layer.html#~RenderFunction
But i cannot figure out how to implement this correctly. What is the frame state, and how can this be referenced correctly to the render property?
The devs behind OpenLayers have created an example to show how an SVG image can be rendered:
https://github.com/openlayers/openlayers/pull/10363
I am using AEM 6.2 and trying to create a parsys component in crx, using the code below
However, the height of this parsys, in edit mode, comes as 0px.
Attached are the screenshots.
When I manually change the height to some values eg. 40px, it looks fine.
Note: I am not using any client library for the above page. (no css and js)
Futher, All sample sites like geomatrix etc have parsys showing correctly.
Could anyone guide me with what I am doing wrong?
I think that the problem is outside the component or any of the code shown here.
I think what's happening is that the css style for the div that gives the droptarget placeholder its dimensions is not loading.
That's loaded as part of the AEM authoring client libraries which you should be inheriting from the foundation page component.
Examine your page component's sling:resourceSuperType property. It should point to either wcm/foundation/components/page or wcm/foundation/components/page or inherit from a component that does.
If that is set then you have may have blocked one of the scripts within it, quite possibly head.html.
Include following code in the head section of the page component's rendering script.
<!--/* Include Adobe Dynamic Tag Management libraries for the header
<sly data-sly-include="/libs/cq/cloudserviceconfigs/components/servicelibs/servicelibs.jsp" data-sly-unwrap/>
*/-->
<!--/* Initializes the Experience Manager authoring UI */-->
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp" data-sly-unwrap/>
For resolving your issue, you need to include init.jsp in the first before writing down the parsys code. I mean write like this.
<head>
<sly data-sly-include='/libs/wcm/core/components/init/init.jsp' />
</head>
<body>
<sly data-sly-resource="${'par' #resourceType='foundation/components/parsys'}" />
</body>
I think #l-klement pointed it out correctly that the problem is outside component. When I rename the landingpage.html file to body.html it starts working fine. I think this may be because of different files like head.html etc present at wcm/foundation/components/page which is required to provide proper styling and load certain required client libraries which assigns proper styling to parsys.
If the above is true, my next question would be, How can I have my own head.html, body.html, header.html, footer.html etc files without compromising with the parsys styling?
I got in trouble during developing react. I use
<img src="example.svg">
Or using module 'react-inlinesvg' to embed the svg
<Isvg src="example.svg" wrapper={React.DOM.div}>
i want to manipulate the<g>node of the svg file directly in react, add and remove class(ps: it's quite easy in JQuery). I tried to get the ref of the element but failed. what should i do?
There are 2 options:
Use some kind of query selectors;
User react for writing SVG;
I would recommend you using 2nd approach. If you want to manipulate your own SVG, you can just write them in React as a component and work as you work with other React components.
Here you can see a list of supported elements in React.
I am trying to create a custom element that extends a SVGGlement. Here is the JSBin link to the code: http://jsbin.com/kovumoloda/2/edit?html,console,output
When I run the code, ready() isn't called and so aren't the contents of the Shadow DOM rendered.
I tried the same example without Polymer and it worked. Here is the JS Bin link http://jsbin.com/vihosojofi/1/edit?html,console,output
Is there anything I need to do differently to make this thing work with Polymer ?
Thanks !
I've a <g>tag and a with a <foreignObject> child tag.
I use D3 to build them and also update them.
I can easily get update the attributes on the <g> tag, but Ive problems to reach the <foreignObject> tag. I can not get with with .select('foreignObject') or .select('foreignobject')!
Not working example with.select('foreignObject') : http://jsbin.com/efiDiCAB/4/edit
When I use a class to get the foreignObject it is working : http://jsbin.com/efiDiCAB/5/edit
Is there a way to get the foreignObject without setting a class on it?
If not, what is the reason for this behavor?
Thanks.
Not working because a bug in Bug in Webkit: Unable to select <linearGradient> with D3.js in Chrome
Thanks #lars-kotthoff