celest fiber
I have an HTML component <svg width="90" height="90" ng-style="getSVGStyles()"> that gets its styles from a function.
For some reason, the filter css style is being discarded by Angular. Why? How do I avoid this?
scope.getSVGStyles = function () {
return {
filter: "invert(0%) sepia(8%) saturate(7500%) hue-rotate(118deg) brightness(96%) contrast(109%);",
};
};
astral zenith
looks like an AngularJS question (This Discord is for Angular 2+)
anyway i suspect the problem is related to the string you return. it should be something like "filter: invert(0%) sepia(8%) saturate(7500%) hue-rotate(118deg) brightness(96%) contrast(109%);"
in your example filter: is not part of the string.
celest fiber
No, the object key is the name of the CSS property. And yes, the vendor uses 1.8
Example:
return { color: "blue" }
This works. But it doesn't work when returning the filter value
I tried <svg [style.filter]="{{myval}}" and it does provide the value to HTML. But it doesn't update the CSS property
Actually, without using the function, this should be what I want. But it doesn't work for some reason.
Yeah. There's something about ng-style that completely prevents passing it to style when AngularJS parses the object.
celest fiber
Looks like I need to use $sce but neither method works
celest fiber
Okay, I figured out the return. But now neither filter nor color are applied as styles.
return $sce.getTrustedCss(
$sce.trustAs(
"css",
JSON.stringify({
filter: scope.config.Filter,
color: "blue",
}).replaceAll('"', "'"),
),
);