Есть SVG изображение, сгенерированное с помощью D3.js. Нужно некоторые части пометить. Я могу поменять цвет, прозрачность и даже задать градиент.
Как сделать элемент заштрихованным, что бы не менять цвет фона?
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: В ответе подсказали, что для задания кастомного фона можно использовать pattern.
fill="url(#imgpattern)"
Но паттерн заменяет изначальный фон? как сделать так, что бы начальный цвет элемента сохранился?