что делать? добавить фрагмент? Скопируйте код из JSF, нажмите «Новый ответ» в SO, справа от изображения на кнопках в верхней части панели редактирования - «Фрагмент кода». вставьте в него код, протестируйте и сохраните

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

https://jsfiddle.net/q5xnxqkk/

<svg style="background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black;"
  width="60" height="72" viewBox="0 0 60 72">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
    fill="#E6DC00"></path>
    <path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

Ответы на вопрос(3)

svg {
  border:3px solid #0059dd;
  padding:62px 100px 62px 100px;
  cursor:pointer;
  background-color:black
}
  <svg width="60" height="72">
     <path fill="#E6DC00"d="M39.201,34.34l-12-9 c-0.607-0.455-1.419-0.528-2.095-0.189 c-0.677,0.339-1.106,1.031-1.106,1.789 v18 c0,0.758,0.428,1.45,1.106,1.789 c0.283,0.142,0.589,0.211,0.894,0.211 c0.425,0,0.847-0.136,1.2-0.4 l12-9 c0.503-0.377,0.8-0.97,0.8-1.6 C40.001,35.31,39.705,34.717,39.201,34.34 z"/>
     <path fill="#E6DC00 "d="M30,15 c11.598,0,21,9.402,21,20.999 s-9.401,20.999-21,20.999 c-11.599,0-21-9.402-21-20.999 S18.401,15,30,15  M30,9 C15.112,9,3,21.111,3,35.999 s12.112,26.999,27,26.999 c14.888,0,27-12.111,27-26.999 S44.888,9,30,9 L30,9 z"/>
     <path stroke="#0059dd" stroke-width="3" d="M 10,-62 v 196 M 50,-62 v 196"/>
  </svg>

JSFiddle

 JonMark Perry08 окт. 2017 г., 19:30
как это тогда? SVG отображается в том порядке, в котором он написан, поэтому поместите изображение, а затем строки
 svgcoding09 окт. 2017 г., 05:46
Я запутался в том, как бы выровнять линии, чтобы они соответствовали приведенному выше коду. Можете ли вы показать мне, пожалуйста?jsfiddle.net/8gj322p7/1
 svgcoding08 окт. 2017 г., 19:13
Нет, вот так:jsfiddle.net/u7c3tqah Я хотел бы, чтобы изображение шло «за чертой».via.placeholder.com/200x200 Возможно ли это сделать?
 svgcoding09 окт. 2017 г., 03:36
Можете ли вы скопировать тот, что внизу, чтобы выглядеть как тот, что наверху?jsfiddle.net/8gj322p7/1 Перемещение линий, чтобы они были одинаковыми.
 JonMark Perry09 окт. 2017 г., 05:55
Я не понимаю, где вы хотите линии? что не так с использованием метода градиента? путь svg, который выполняет линии, использует M 3, -62, который перемещается абсолютно к (3, -62) (к размеру изображения и отступам), затем перемещается относительно вертикально (строчные буквы v) к (3, -62 + 196) = (3134). Измените 3 на любую желаемую.

И фрагмент:

svg {
  border:3px solid #0059dd;
  padding:62px 100px 62px 100px;
  cursor:pointer;
  background-color:#aaaaaa
}
<svg width="60" height="72">
   <path fill="#000000" d="M30.001,12 C16.767,12,6,22.765,6,35.999 s10.766,23.999,24,23.999 s24-10.765,24-23.999 S43.235,12,30.001,12 L30.001,12 z"/>
   <path fill="#E6DC00"d="M39.201,34.34l-12-9 c-0.607-0.455-1.419-0.528-2.095-0.189 c-0.677,0.339-1.106,1.031-1.106,1.789 v18 c0,0.758,0.428,1.45,1.106,1.789 c0.283,0.142,0.589,0.211,0.894,0.211 c0.425,0,0.847-0.136,1.2-0.4 l12-9 c0.503-0.377,0.8-0.97,0.8-1.6 C40.001,35.31,39.705,34.717,39.201,34.34 z"/>
   <path fill="#E6DC00 "d="M30,15 c11.598,0,21,9.402,21,20.999 s-9.401,20.999-21,20.999 c-11.599,0-21-9.402-21-20.999 S18.401,15,30,15  M30,9 C15.112,9,3,21.111,3,35.999 s12.112,26.999,27,26.999 c14.888,0,27-12.111,27-26.999 S44.888,9,30,9 L30,9 z"/>
   <path stroke="#0059dd" stroke-width="3" d="M -17,-62 v 196 M 77,-62 v 196"/>
</svg>

 svgcoding09 окт. 2017 г., 07:39
Здесь нет линий, как получилось?i.imgur.com/1iIjE54.png Почему мы видим 2 разные вещи? Я не понимаю
 svgcoding09 окт. 2017 г., 07:51
Как ты это делаешь? Как вы размещаете здесь фрагмент кода?
 JonMark Perry09 окт. 2017 г., 07:54
что делать? добавить фрагмент? Скопируйте код из JSF, нажмите «Новый ответ» в SO, справа от изображения на кнопках в верхней части панели редактирования - «Фрагмент кода». вставьте в него код, протестируйте и сохраните
 JonMark Perry09 окт. 2017 г., 07:50
ты тоже можешь? возможно это настройка в JSFiddle
 svgcoding09 окт. 2017 г., 07:45
Можете ли вы разместить здесь фрагмент кода? Что-то должно быть по-другому.
Решение Вопроса

они являются частью линейного градиента, так как он у вас есть, я предполагаю, что вы знаете, как работает фоновое изображение.

Там может быть два подхода, один из которых отказатьсяlinear-gradient часть из ваших SVGbackground-image и вместо этого используйтеurl('URL-TO-IMAGE')и для линий используйте SVG<path>, Я не эксперт в SVG, поэтому не могу сказать вам, как это сделать.

Второй подход, который я бы рекомендовал, это использоватьнесколько фоновДа, CSS допускает слои фоновых изображений / градиентов / цветов, и это довольно просто.

background-image: url("image-1.png"), url("image-2.png");

или же

background-image: linear-gradient(....), url("image-2.png");

В настоящее время ваши SVGbackground-image свойство

background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px );

Чтобы иметь другое изображение / линейный градиент позади текущего, вы просто разделяете части, используя запятую, как это

background-image: linear-gradient( to right,#000000 83px,#0059dd 83px, #0059dd 86px, #000000 86px, #000000 174px, #0059dd 174px, #0059dd 177px, #000000 177px ), url('http://via.placeholder.com/200x200');

Но даже если вы сделаете это, вы не увидите изображение наhttp://via.placeholder.com/200x200 в поле, это связано с тем, что в вашем линейном градиенте есть полностью непрозрачные цвета, давайте изменим все#000000 в значении вашего линейного градиента вtransparent

background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px ), url('http://via.placeholder.com/200x200');

Вот рабочая демонстрация:

<svg style="background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px,transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ), url('http://via.placeholder.com/200x200');border: 3px solid #0059dd;padding: 62px 100px 62px 100px;  cursor: pointer;background-color:black; background-position: center;"
  width="60" height="72" viewBox="0 0 60 72">
    <path d="M30.001,12C16.767,12,6,22.765,6,35.999s10.766,23.999,24,23.999s24-10.765,24-23.999S43.235,12,30.001,12L30.001,12z" fill="#000000"></path>
    <path d="M39.201,34.34l-12-9c-0.607-0.455-1.419-0.528-2.095-0.189c-0.677,0.339-1.106,1.031-1.106,1.789v18c0,0.758,0.428,1.45,1.106,1.789c0.283,0.142,0.589,0.211,0.894,0.211c0.425,0,0.847-0.136,1.2-0.4l12-9c0.503-0.377,0.8-0.97,0.8-1.6C40.001,35.31,39.705,34.717,39.201,34.34z"
    fill="#E6DC00"></path>
    <path fill="#E6DC00 " d="M30,15c11.598,0,21,9.402,21,20.999s-9.401,20.999-21,20.999c-11.599,0-21-9.402-21-20.999S18.401,15,30,15 M30,9C15.112,9,3,21.111,3,35.999s12.112,26.999,27,26.999c14.888,0,27-12.111,27-26.999S44.888,9,30,9L30,9z" /></path>
  </svg>

Пожалуйста, изучите код и экспериментируйте с ним, это лучший способ узнать больше!

Ваш ответ на вопрос