2

Есть 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)"

Но паттерн заменяет изначальный фон? как сделать так, что бы начальный цвет элемента сохранился?

1 ответ 1

1

Как вариант, могу предложить использовать fill="url(#imgpattern)".

Пример:

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>

Паттерн (штрих) можно свой задавать.

3
  • Думаю, это то что надо, только как это сделать с помощью JS? SVG генерируется автоматически и я не могу менять сам макет. 15 сен 2016 в 12:35
  • Это уже сложно)
    – SVE
    15 сен 2016 в 12:36
  • Ну, собственно в этом и был вопрос. И ваш вариант заменяет цвет исходного элемента, а мне нужно сохранить цвет. 15 сен 2016 в 12:44

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.