There is a SVG image generated with D3.js. Need some parts to tag. I can change the color, transparency and even set a gradient.

How to make an element shaded so as not to change the background color?

d3.selectAll('[data-venn-sets=\"40050640\"] > path').style("fill-opacity", 0.5); d3.selectAll('[data-venn-sets=\"40050640\"] > path').style("fill", "red"); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="600" height="350"><g class="venn-area venn-circle" data-venn-sets="40050623"><path d=" M 202.3684346783171 196.99968964309076 m -138.0003103569092 0 a 138.0003103569092 138.0003103569092 0 1 0 276.0006207138184 0 a 138.0003103569092 138.0003103569092 0 1 0 -276.0006207138184 0" style="fill-opacity: 0.25; fill: rgb(214, 39, 40);"></path><text class="label" text-anchor="middle" dy=".35em" x="170" y="196" style="fill: rgb(214, 39, 40);"><tspan x="170" y="196" dy="0.35em">1</tspan></text></g><g class="venn-area venn-circle" data-venn-sets="40050618"><path d=" M 406.17610956687787 196.99968964309076 m -129.45576611171427 0 a 129.45576611171427 129.45576611171427 0 1 0 258.91153222342854 0 a 129.45576611171427 129.45576611171427 0 1 0 -258.91153222342854 0" style="fill-opacity: 0.25; fill: rgb(148, 103, 189);"></path><text class="label" text-anchor="middle" dy=".35em" x="438" y="196" style="fill: rgb(148, 103, 189);"><tspan x="438" y="196" dy="0.35em">3</tspan></text></g><g class="venn-area venn-circle" data-venn-sets="40050640"><path d=" M 292.9133731138613 73.54857315553117 m -58.54857315553119 0 a 58.54857315553119 58.54857315553119 0 1 0 117.09714631106237 0 a 58.54857315553119 58.54857315553119 0 1 0 -117.09714631106237 0" style="fill-opacity: 0.25; fill: rgb(127, 127, 127);"></path><text class="label" text-anchor="middle" dy=".35em" x="305" y="56" style="fill: rgb(127, 127, 127);"><tspan x="305" y="56" dy="0.35em">2</tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="40050623_40050618"><path d=" M 309.87875941578204 283.5191425623511 A 129.45576611171427 129.45576611171427 0 0 1 309.87875941578204 110.48023672383043 A 138.0003103569092 138.0003103569092 0 0 1 309.87875941578204 283.5191425623511" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="308" y="196" style="fill: rgb(68, 68, 68);"><tspan x="308" y="196" dy="0.35em"></tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="40050623_40050640"><path d=" M 235.32431741609037 62.99224413509893 A 138.0003103569092 138.0003103569092 0 0 1 320.2838550703656 125.30562229878569 A 58.54857315553119 58.54857315553119 0 0 1 235.32431741609037 62.99224413509893" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="271" y="103" style="fill: rgb(68, 68, 68);"><tspan x="271" y="103" dy="0.35em"></tspan></text></g><g class="venn-area venn-intersection" data-venn-sets="40050618_40050640"><path d=" M 294.1730024548679 132.0835947449341 A 129.45576611171427 129.45576611171427 0 0 1 351.1236904286465 79.83302831573467 A 58.54857315553119 58.54857315553119 0 0 1 294.1730024548679 132.0835947449341" style="fill-opacity: 0;"></path><text class="label" text-anchor="middle" dy=".35em" x="325" y="109" style="fill: rgb(68, 68, 68);"><tspan x="325" y="109" dy="0.35em"></tspan></text></g></svg>

Update: The answer suggested that you can use the pattern to set a custom background.

fill = "url (#imgpattern)"

But does the pattern replace the original background? How to make it so that the initial color of the element is preserved?

    1 answer 1

    Alternatively, I can suggest using fill="url(#imgpattern)" .

    Example:

     d3.selectAll('[data-venn-sets=\"40050640\"] > path').style("fill-opacity", 0.5); d3.selectAll('[data-venn-sets=\"40050640\"] > path').style("fill", "red"); 
     <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="600" height="350"> <g class="venn-area venn-circle" data-venn-sets="40050623"> <path d=" M 202.3684346783171 196.99968964309076 m -138.0003103569092 0 a 138.0003103569092 138.0003103569092 0 1 0 276.0006207138184 0 a 138.0003103569092 138.0003103569092 0 1 0 -276.0006207138184 0" style="fill-opacity: 0.25; fill: rgb(214, 39, 40);"></path> <text class="label" text-anchor="middle" dy=".35em" x="170" y="196" style="fill: rgb(214, 39, 40);"><tspan x="170" y="196" dy="0.35em">1</tspan></text></g> <g class="venn-area venn-circle" data-venn-sets="40050618"> <path d=" M 406.17610956687787 196.99968964309076 m -129.45576611171427 0 a 129.45576611171427 129.45576611171427 0 1 0 258.91153222342854 0 a 129.45576611171427 129.45576611171427 0 1 0 -258.91153222342854 0" style="fill-opacity: 0.25; fill: rgb(148, 103, 189);"></path> <text class="label" text-anchor="middle" dy=".35em" x="438" y="196" style="fill: rgb(148, 103, 189);"><tspan x="438" y="196" dy="0.35em">3</tspan></text></g> <g class="venn-area venn-circle" data-venn-sets="40050640"> <path d=" M 292.9133731138613 73.54857315553117 m -58.54857315553119 0 a 58.54857315553119 58.54857315553119 0 1 0 117.09714631106237 0 a 58.54857315553119 58.54857315553119 0 1 0 -117.09714631106237 0" style="fill-opacity: 0.25; fill: rgb(127, 127, 127);"></path> <text class="label" text-anchor="middle" dy=".35em" x="305" y="56" style="fill: rgb(127, 127, 127);"><tspan x="305" y="56" dy="0.35em">2</tspan></text></g> <g class="venn-area venn-intersection" data-venn-sets="40050623_40050618"> <defs> <pattern id="imgpattern" x="0" y="0" width="1" height="1"> <image width="150" height="150" xlink:href="https://www.transparenttextures.com/patterns/diagonal-striped-brick.png"/> </pattern> </defs> <path fill="url(#imgpattern)" d=" M 309.87875941578204 283.5191425623511 A 129.45576611171427 129.45576611171427 0 0 1 309.87875941578204 110.48023672383043 A 138.0003103569092 138.0003103569092 0 0 1 309.87875941578204 283.5191425623511" ></path> <text class="label" text-anchor="middle" dy=".35em" x="308" y="196" style="fill: rgb(68, 68, 68);"><tspan x="308" y="196" dy="0.35em"></tspan></text></g> <g class="venn-area venn-intersection" data-venn-sets="40050623_40050640"> <defs> <pattern id="imgpattern" x="0" y="0" width="1" height="1"> <image width="150" height="150" xlink:href="https://www.transparenttextures.com/patterns/diagonal-striped-brick.png"/> </pattern> </defs> <path fill="url(#imgpattern)" d=" M 235.32431741609037 62.99224413509893 A 138.0003103569092 138.0003103569092 0 0 1 320.2838550703656 125.30562229878569 A 58.54857315553119 58.54857315553119 0 0 1 235.32431741609037 62.99224413509893"></path> <text class="label" text-anchor="middle" dy=".35em" x="271" y="103" style="fill: rgb(68, 68, 68);"><tspan x="271" y="103" dy="0.35em"></tspan></text></g> <g class="venn-area venn-intersection" data-venn-sets="40050618_40050640"> <defs> <pattern id="imgpattern" x="0" y="0" width="1" height="1"> <image width="150" height="150" xlink:href="https://www.transparenttextures.com/patterns/diagonal-striped-brick.png"/> </pattern> </defs> <path fill="url(#imgpattern)" d=" M 294.1730024548679 132.0835947449341 A 129.45576611171427 129.45576611171427 0 0 1 351.1236904286465 79.83302831573467 A 58.54857315553119 58.54857315553119 0 0 1 294.1730024548679 132.0835947449341"></path> <text class="label" text-anchor="middle" dy=".35em" x="325" y="109" style="fill: rgb(68, 68, 68);"><tspan x="325" y="109" dy="0.35em"></tspan></text></g></svg> </body> </html> )" d = "M 309.87875941578204 283.5191425623511 A 129.45576611171427 129.45576611171427 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <svg width="600" height="350"> <g class="venn-area venn-circle" data-venn-sets="40050623"> <path d=" M 202.3684346783171 196.99968964309076 m -138.0003103569092 0 a 138.0003103569092 138.0003103569092 0 1 0 276.0006207138184 0 a 138.0003103569092 138.0003103569092 0 1 0 -276.0006207138184 0" style="fill-opacity: 0.25; fill: rgb(214, 39, 40);"></path> <text class="label" text-anchor="middle" dy=".35em" x="170" y="196" style="fill: rgb(214, 39, 40);"><tspan x="170" y="196" dy="0.35em">1</tspan></text></g> <g class="venn-area venn-circle" data-venn-sets="40050618"> <path d=" M 406.17610956687787 196.99968964309076 m -129.45576611171427 0 a 129.45576611171427 129.45576611171427 0 1 0 258.91153222342854 0 a 129.45576611171427 129.45576611171427 0 1 0 -258.91153222342854 0" style="fill-opacity: 0.25; fill: rgb(148, 103, 189);"></path> <text class="label" text-anchor="middle" dy=".35em" x="438" y="196" style="fill: rgb(148, 103, 189);"><tspan x="438" y="196" dy="0.35em">3</tspan></text></g> <g class="venn-area venn-circle" data-venn-sets="40050640"> <path d=" M 292.9133731138613 73.54857315553117 m -58.54857315553119 0 a 58.54857315553119 58.54857315553119 0 1 0 117.09714631106237 0 a 58.54857315553119 58.54857315553119 0 1 0 -117.09714631106237 0" style="fill-opacity: 0.25; fill: rgb(127, 127, 127);"></path> <text class="label" text-anchor="middle" dy=".35em" x="305" y="56" style="fill: rgb(127, 127, 127);"><tspan x="305" y="56" dy="0.35em">2</tspan></text></g> <g class="venn-area venn-intersection" data-venn-sets="40050623_40050618"> <defs> <pattern id="imgpattern" x="0" y="0" width="1" height="1"> <image width="150" height="150" xlink:href="https://www.transparenttextures.com/patterns/diagonal-striped-brick.png"/> </pattern> </defs> <path fill="url(#imgpattern)" d=" M 309.87875941578204 283.5191425623511 A 129.45576611171427 129.45576611171427 0 0 1 309.87875941578204 110.48023672383043 A 138.0003103569092 138.0003103569092 0 0 1 309.87875941578204 283.5191425623511" ></path> <text class="label" text-anchor="middle" dy=".35em" x="308" y="196" style="fill: rgb(68, 68, 68);"><tspan x="308" y="196" dy="0.35em"></tspan></text></g> <g class="venn-area venn-intersection" data-venn-sets="40050623_40050640"> <defs> <pattern id="imgpattern" x="0" y="0" width="1" height="1"> <image width="150" height="150" xlink:href="https://www.transparenttextures.com/patterns/diagonal-striped-brick.png"/> </pattern> </defs> <path fill="url(#imgpattern)" d=" M 235.32431741609037 62.99224413509893 A 138.0003103569092 138.0003103569092 0 0 1 320.2838550703656 125.30562229878569 A 58.54857315553119 58.54857315553119 0 0 1 235.32431741609037 62.99224413509893"></path> <text class="label" text-anchor="middle" dy=".35em" x="271" y="103" style="fill: rgb(68, 68, 68);"><tspan x="271" y="103" dy="0.35em"></tspan></text></g> <g class="venn-area venn-intersection" data-venn-sets="40050618_40050640"> <defs> <pattern id="imgpattern" x="0" y="0" width="1" height="1"> <image width="150" height="150" xlink:href="https://www.transparenttextures.com/patterns/diagonal-striped-brick.png"/> </pattern> </defs> <path fill="url(#imgpattern)" d=" M 294.1730024548679 132.0835947449341 A 129.45576611171427 129.45576611171427 0 0 1 351.1236904286465 79.83302831573467 A 58.54857315553119 58.54857315553119 0 0 1 294.1730024548679 132.0835947449341"></path> <text class="label" text-anchor="middle" dy=".35em" x="325" y="109" style="fill: rgb(68, 68, 68);"><tspan x="325" y="109" dy="0.35em"></tspan></text></g></svg> </body> </html>

    Pattern (bar) can be your ask.

    • I think this is what you need, just how to do it with JS? SVG is generated automatically and I cannot change the layout itself. - Alexey Prokopenko
    • This is already difficult) - HamSter
    • Well, actually this was the question. And your option replaces the color of the original element, but I need to keep the color. - Alexey Prokopenko