Angular: Transclusion, Set Color of Svg Element

Angular: transclusion, set color of SVG element

An SVG element has a stroke and a fill color. You can set each one with the corresponding element or style attribute:

<svg [attr.stroke]="color" ... >
<svg [style.stroke]="color" ... >
<svg [attr.fill]="color" ... >
<svg [style.fill]="color" ... >

The color input property of the component must be set in the parent component:

<my-svg-component [color]="myCustomColor" ...>

You can try the code in this stackblitz. Please note that if shape and text elements inside of the SVG element set their own stroke or fill colors, these will override the color set at the SVG element level.

Rendering SVG templates in AngularJS directives

I have forked and updated your plunker to make it work here. Your function 'makeNode' was throwing error sometimes when the node in question was detached from document by angular for processing. Using a timeout of 0 ms does the trick of delaying the execution just enough to make the parent node available.
Also, I am using the linking function to do all manipulation because the compile function executes only once per ng-repeat but we need it repeated number of times. You can read more about the difference between compile and linking functions under 'The difference between Compile and Link' section on Angular Directive page.

Here is the relevant code:

/* Create a shape node with the given settings. */
function makeNode(name, element, settings) {
  var ns = 'http://www.w3.org/2000/svg';
  var node = document.createElementNS(ns, name);
  for (var attribute in settings) {
    var value = settings[attribute];
    if (value !== null && value !== null && !attribute.match(/\$/) &&
      (typeof value !== 'string' || value !== '')) {
      node.setAttribute(attribute, value);
    }
  }
  return node;
}

Angular 2 - How to have an `svg` in app.component and a `circle` as a child component?

I believe answer to your question described in this wonderfull article: https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#avoiding-element-selectors-for-components

In short, you need to use your child component as attribute instead of element (you can do this because @Component decorator derived from @Directive).
Applying to your case, it would look like this:

In board.component.html:

<svg [attr.width]="width" [attr.height]="height">
    <svg:g app-pacman />
</svg>

In pacman.component.ts:

@Component({
    selector: '[app-pacman]',
    templateUrl: ...
})
...

custom attribute type directive to set the background color of c3 chart

Firstly, I'm not familiar with angular. Basically, after the chart is created, you insert the rectangle, and then style the background colour of the rectangle.

Since I don't know angular very well, and I don't know how the timing of events / binding works, I have used setTimeout to wait for the chart to be created, before inserting the rectangle. You will need to move this code into the appropriate directive.

It's the exact same code as the other answer:

setTimeout(function(){
    d3.selectAll("svg > g:nth-child(3)").insert("rect", ":first-child").attr("width", "100%").attr("height", "100%").attr("fill", "yellow");
}, 1000);

See:
http://plnkr.co/edit/CBcIsW9QnHaeXicmwZk2?p=preview

When does an SVG element in a directive get updated?

Listening for DOMSubtreeModified on the element solves this for the time being, but that event is deprecated. The proper way to solve this is to use the MutationObserver interface.

AngularJS dynamic SVG displaying

The main problem is you had svgConfig.textConfig.distance.Y which is wrong. distance property doesn't belongs to textConfig object, it is kept as individual property. Because of which calculation is producing a value NaN. That value should be svgConfig.distance.Y

Though I would suggest you to use ng-attr-* attribute to rendering x & y attribute value dynamically like ng-attr-y

</g>
    <svg height="{{svgConfig.height}}" 
        width="{{svgConfig.width}}" 
        ng-attrs-y="{{(svgConfig.fontSize) + 1*svgConfig.textConfig.distance.Y}}">
        <g 
            transform="translate(0, {{svgConfig.distance.Y}})">          
            <text font-family="{{svgConfig.textConfig.fontFamily}}" 
                font-size="{{svgConfig.textConfig.fontSize}}"
                x="0" y="0" 
                inline-size="200" 
                alignment-baseline="text-before-edge">
                {{line}}
            </text>     
        </g>
    </svg>
</g>

---

Related Topics