Menu
I am trying to render some SVG with AngularJS but I can't dynamically change the viewbox of the svg element.
Angular renders a 'viewbox' attribute, but browsers expect a 'viewBox' attribute. So the result is:
<svg height="151px" width="1366px" viewBox="{{ mapViewbox }}" viewbox="-183 425 1366 151">
How can I get the result I expect:
<svg height="151px" width="1366px" viewBox="-183 425 1366 151">
Thanks.
930
lowercase() Function. The angular. lowercase() Function in AngularJS is used to convert the string into lowercase. It can be used when the user wants to show the text in lowercase instead of uppercase or one wants to compare two strings.
Using attrs you are able to access the attributes defined in your html tag like <fm-rating ng-model="$parent.restaurant.price" symbol="$" readonly="true"> So in this case you will have access to the symbol and readonly attributes.
Restrict. Angular allows us to set a property named restrict on the object we return on our directive definition. We can pass through a string with certain letters letting Angular know how our directive can be used. function MyDirective() { return { restrict: 'E', template: '<div>Hello world!
Create New Directives In addition to all the built-in AngularJS directives, you can create your own directives. New directives are created by using the . directive function. To invoke the new directive, make an HTML element with the same tag name as the new directive.
See if this directive works:
app.directive('vbox', function() {
return {
link: function(scope, element, attrs) {
attrs.$observe('vbox', function(value) {
element.attr('viewBox', value);
})
}
};
});
HTML:
<svg height="151px" width="1366px" vbox="{{ mapViewbox }}">
Plnkr. You'll need to "Inspect element" or "View source" to see the svg tag.
Update: If your app includes jQuery, see Does the attr() in jQuery force lowercase?
@Niahoo found that this worked if jQuery is included (he made an edit to this post, but for some reason, other SO moderators rejected it... I liked it though, so here it is):
element.get(0).setAttribute("viewBox", value);
Looking for a solution myself I came upon this answer the correct way to achieve this is by using pattern transform ng-attr-view_box
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
