Есть ли простой способ стилизовать элемент пути svg, например, div с 3d-рамкой?

Question

Мне нужна 3d-граница на моих фигурах SVG. Мои svgs создаются во время выполнения (в javascript) и имеют гибкую ширину / высоту (не должно иметь значения). И, конечно, они имеют более сложные формы, чем приведенный ниже пример. Это просто самый простой пример, который я могу придумать, чтобы показать вам, чего я пытаюсь достичь.

<div class="sample"></div>

CSS:

.sample {
  width:300px;
  height:150px;
  background-color: red;
  border-radius:20px;
  border: solid 15px green;
  border-top-color: blue;
  border-left-color: blue;
}

Не хотел публиковать картинку здесь, и нет никакого полезного кода SVG, так что вот скрипка, чтобы показать, как она должна выглядеть: Пример CSS

Все мои фигуры содержат только вертикальные и горизонтальные линии (+ радиус границы)

Answer 1

Самое главное, насколько точно вы хотите получить. Если мы говорим о ширине штриха всего в один или два пикселя, это не будет иметь большого значения, но в примере ниже можно увидеть различия в деталях.

Радиусы границ не совпадают по всем углам, и изменение цвета не происходит в нужном месте. Углы области заполнения не закруглены; для этого вам действительно нужно нарисовать сегменты траектории дуги.

Если у вас есть несколько непересекающихся путей, вы можете сгруппировать их в элемент <g> и затем ссылаться только на эту одну группу в элементах <use>.

path {
    fill: blue;
}
use.upper {
    stroke: red;
    stroke-width: 40;
    stroke-linejoin: round;
}
use.lower {
    stroke: green;
    stroke-width: 20;
    stroke-linejoin: round;
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
     width="300" height="250">
  <use class="upper" xlink:href="#path1" />
  <use class="lower" xlink:href="#path1" x="10" y="10" />
  <path id="path1" d="M60,60 H160 V120 H240 V200 H60 Z" />
</svg>

Для всего, что касается точности, вам может потребоваться вычислить формы, которые вы хотите получить, в вашем коде Javascript.

Может показаться заманчивым посмотреть на эффекты фильтра , но, опять же, разноцветным эффектам границы будет не хватать точности. Для размытых эффектов падающей тени они являются отличным выбором, но для четко определенных границ их производительность хуже, чем у этой техники с <use> элементами.