Эффект митры, когда в SVG объединяются два отдельных пути - PullRequest
Новая
       29

Эффект митры, когда в SVG объединяются два отдельных пути

0 голосов
/ 04 октября 2018

Я работаю с отдельными путями SVG, и когда есть соединение путей, нужен эффект среза. Это совершенно новый для меня.

Форма SVG выглядит как многоугольник, с каждой стороной как отдельный путь.

Пример моего кода SVG, не отображает исходный полигон.Пожалуйста, смотрите изображение для о / п: 

<svg viewBox="0 0 330 330">
<g id="v-3" class="joint-viewport">
  <g model-id="db69ee92-054d-4ce5-9300-ae09f385d9f2" id="j_1" class="joint-cell joint-type-custom joint-type-custom-line joint-element joint-theme-default" data-type="custom.Line" transform="translate(90,90)">
    <g class="rotatable" id="v-12">
      <g class="scalable" transform="scale(2.5,3.75)">
        <path class="path0" id="v-13" d="M 0 0 L 30 0" stroke="#806476" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
        <path class="path1" id="v-14" d="M 30 0 L 30 20" stroke="#181972" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
        <path class="path2" id="v-15" d="M 30 20 L 60 20" stroke="#91a19b" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
        <path class="path3" id="v-16" d="M 60 20 L 60 40" stroke="#f24167" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
        <path class="path4" id="v-17" d="M 60 40 L 0 40" stroke="#21e578" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
        <path class="path5" id="v-18" d="M 0 40 L 0 0" stroke="#cf2fe0" stroke-width="15" cursor="pointer" event="element:path-click" stroke-linecap="square"></path>
      </g>
    </g>
  </g>
</g>
</svg>

Ссылка ниже изображения SVG показывает форму многоугольника.Когда я нажимаю на отдельные пути, пересечение должно измениться как первый путь по второму, второй путь по первому и затем эффект косой.Я достиг двух других, но не эффекта митры.

Форма SVG Вторая ссылка на изображение показывает переход для каждого щелчка мыши. Мне нужно знать эффект митры / диагонали, как показано впоследняя цифра.

Изображение 3 Если это единственный svg, то эффект митры может быть достигнут с помощью line-join.Как получить эффект митры здесь?

1 Ответ

0 голосов
/ 04 октября 2018

Чтобы получить митру, вам нужно использовать фигуры вместо штрихов.Вы можете сделать это вручную, если считаете, что митра представляет собой равнобедренный прямоугольный треугольник, чья катетина = 15. 

<svg viewBox="0 0 300 300" width="200">

<path id="_1"  d="M50,50L150,50 135,65 65,65z" fill="#806476"/>  
<path id="_2"  d="M150,50L150,150 135,165 135,65z" fill="#181972"/>  
<path id="_3"  d="M150,150 L250,150 235,165 135,165z" fill="#91a19b" />
<path id="_4"  d="M250,150L250,250 235 235 235 165z" fill="#f24167"/>
<path id="_5"  d="M250,250L50,250 65,235 235 235z" fill="#21e578"/>
<path id="_6"  d="M50,250L50,50 65,65 65,235z" fill="#cf2fe0" />
  
</svg>
...