2

Do you know how to override group level opacity at the element level? For example, I would expect the following code to set rectangle opacity to 1 but it remains 0.5.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

    <script src="https://d3js.org/d3.v6.min.js"></script>

    <script>
        let svg = d3.select("body").append("svg")
        let group= svg.append("g").attr("opacity", 0.5) // group level
        group.append("rect")
            .attr("height", 50)
            .attr("width", 50)
            .attr("opacity", 1) // element level
    </script>

</body>
</html>

But if I interchange 0.5 and 1, it works fine!

tash
  • 711
  • 5
  • 13
  • 1
    If the parent's opacity is .5 the child's opacity will be relative to the parent's. For exemple if the child's opacity is .5 the result will be like .25 (half the opacity of the parent). – enxaneta Oct 31 '20 at 21:51
  • Okay, understood. Can you tell how to restore absolute opacity to 1 at the child level? – tash Oct 31 '20 at 22:49
  • Okay, I think there is no way to do that. Reference: https://stackoverflow.com/questions/12613191/why-cant-child-elements-override-the-opacity-of-parent-with-a-greater-value/12613251 – tash Oct 31 '20 at 23:00
  • I can confirm that there is no way to do what you want. – Paul LeBeau Nov 01 '20 at 06:54

0 Answers0