Questions tagged svg

Explore the latest questions and answers asked by our top developers.

D3 multi line data point circle getting out of line

I’ve been trying to build a multiline chart of three lines and display tooltip along with circles on data points when hovered over. However the circle is not following the line and at certain data points and it comes out of the line. Setting the element focus, for the particular line by adjusting transform, translate […]

By chatterjeetridib
Published
Categorized as angular, d3.js, javascript, svg Tagged , , ,

Angular with svg: Refused to load plugin data from ‘XXX’ because it violates the following Content Security Policy directive: "object-src ‘none’"

HTML: <object class="flag me-2" [attr.data]="getFlag(currentLang) | safe:’resourceUrl’"> </object> which will be rendered to: <object class="flag me-2 data="../../../assets/images/lang/en.svg"> the pipe is used to sanitize the resource url. This gives an error (local it works fine but when I publish/release this the error will ocurr) Refused to load plugin data from ‘https://mysite/assets/images/lang/en.svg’ because it violates the following […]

By Babulaas
Published
Categorized as angular, content-security-policy, svg Tagged , ,

Getting a 3d effect with selected pie chart slices

I’m trying to make so that when the user selects or hover over a slice of a pie chart (actually a donut in my case), instead of just offsetting the slice, the slice seems to get up in the z axis (towards the user). I’m trying to accomplish this by setting a shadow filter through […]

Highcharts – Getting a 3d effect with selected pie chart slices [closed]

In highcharts, I’m trying to make so that when the user selects or hover over a slice of a pie chart, the slice makes the effect of getting up in the z axis (towards the user). I’m trying to accomplish this by setting a shadow filter through css and making the border of the slice […]

Mix blend mode not working for svg element in firefox

I have a svg on top of an img tag. The svg has an element with mix blend mode: color to blend with the img: <g id="myitem" style="mix-blend-mode:color"> <path d="M456 410.5L2.5 497L3 … 410.5Z" fill="white"/> </g> This code works perfectly on Chrome it blends and create a greyscale filter but on Firefox it just can’t […]

By Thuan Tran
Published
Categorized as angular, css, svg Tagged , ,

Export Svg from Angular Library

I am creating a design library, and would like to include some basic SVG to it, so that if user do not add/override they will still be displayed as backup. I created a folder in my library assets/ => svg/ => alert.svg => success.svg => trash.svg => … I then added this folder to ng-package.json […]

How do I make my d3 graph fit respnsively within my grid?

I have customised a donut chart for displaying with a grid layout. The grid has 3 different cards of same height in one row. But when i change the svg size manually from within the d3 component, the child component in the grid overflows the grid-area I have specified for it, which is manageable at […]

By Steve Chacko
Published
Categorized as angular, css, d3.js, javascript, svg Tagged , , , ,

How do I make my d3 graph fit responsively within my grid?

I have customised a donut chart for displaying with a grid layout. The grid has 3 different cards of same height in one row. But when i change the svg size manually from within the d3 component, the child component in the grid overflows the grid-area I have specified for it, which is manageable at […]

By Steve Chacko
Published
Categorized as angular, css-grid, d3.js, javascript, svg Tagged , , , ,

angular template binding – svg data property

I have a svg (object element) and I like to change a part of the data property with an if else statement. I can use ng template but if that is not necessary I rather not use it for keeping my code clean. <object class="flag me-2" data="`../../../../assets/images/lang/${currentLang === ‘nl’: ‘en’ ? ‘nl’}.svg`"> </object> normal: ../../../../assets/images/lang/en.svg […]

By Babulaas
Published
Categorized as angular, data-binding, svg Tagged , ,

How to use variables in svg filter’s feflood tag?

I have following code <filter x="-0.1" y="-0.1" width="1.2" height="1.3" id="color_available"> <feFlood flood-color="#306b34" result="bg" /> <feMerge> <feMergeNode in="bg" /> <feMergeNode in="SourceGraphic" /> </feMerge> </filter> <text filter="url(#color_available)"> <tspan>Sample text</tspan> </text> Now I want to use dynamic color from my component.ts file Something like <filter x="-0.1" y="-0.1" width="1.2" height="1.3" id="color_available"> <feFlood flood-color="{{bgColor}}" result="bg" /> <feMerge> <feMergeNode in="bg" /> […]

By user17189239 301
Published
Categorized as angularjs, svg, svg-filters, text Tagged , , ,
1 2 3 22

Still Have Questions?


Our dedicated development team is here for you!

We can help you find answers to your question for as low as 5$.

Contact Us
faq