search

naikus / svg-gauge

Minimalistic, animated SVG gauge. Zero dependencies
MIT License
319 stars 74 forks source link

Is it possible to remove the padding from within the SVG? #10

Closed bhellman1 closed 6 years ago

bhellman1 commented 6 years ago

Amazing work... I'm noticing that all the SVGs generated with gauges have padding within the SVG, is it possible to have the gauge use the all the space in the SVG?

Given that the gauge currently has some random padding within the SVG it makes it near impossible to create an SVG that matches a design.

Thanks again for this, appreciate any tips. Thanks

naikus commented 6 years ago

Hi @bhellman1, Thanks! There is an option call dialRadius. Its default value is 40 i.e. (gauge's viewbox (100) / 2 - 10). You can change it in the gauge's constructor function with this option. Set it to 49:

I missed it in the documentation somehow :) I'll put it in the README

var gauge1 = Gauge(
  document.getElementById("gauge1"), {
    dialRadius: 49, // This will make the gauge's dial flush with the svg element
    ...other options
  }
);
bhellman1 commented 6 years ago

Strange, when I set dialRadius to 49, the gauge grows to fit outside the SVG resulting in the gauge being cut off.

naikus commented 6 years ago

@bhellman1 The value you set will depend on the stroke width of your dial. Play around with different values. e.g. In the online demo on codenpen.io, for gauge2, the dial radius needs to be set as dialRadius: 42.5 because the stroke width is 10