1

Issue: Not able to give background color to the whole content and I assume this is because I gave CSS style ("overflow", "visible") or may be because of (position: absolute) on parent. I want whole content to take background color as either grey or black. I have also shared fiddle link ( actual code is written in react ).

https://jsfiddle.net/m1r0428k/1/

React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);

function colorLegend(legend: string) {
// logic
select(legend)
.attr("height", 100 + "%")
.attr("width", 100 + "%")
.style("background-color", "black")
 .style("border-radius", "5px")
 .call(colorLegend);
}

return (
    <div style={{position: "absolute",right: 16,top: 10,backgroundColor: 
    "grey"}}>
      <div id="legend"></div>
    </div> 
);
Eric
  • 123
  • 9

1 Answers1

0

I'm not an expert in svg, but this what I've come to.

Set a viewBox attribute to svg: <svg viewBox="0 0 200 390">.

This link How to Scale SVG may help you further.

Nikita Skrebets
  • 1,518
  • 2
  • 13
  • 19
  • I do not want to give predefined height as the content are dynamic and hence if I give height: 100%, the content get cropped and for that I gave overflow: visible but then again background don't work for overflowed content. I tried as ex: – Eric Nov 29 '21 at 16:18
  • I don't think svg can work that way... Found an answer to a similar question: https://stackoverflow.com/a/11683540/4873616. It says: "if you are going to add elements to the bottom of your svg you have to change the viewBox value accordingly (...) it will occur beyound your viewBox, which has a max y-point" – Nikita Skrebets Nov 29 '21 at 16:38