CSS - можем ли мы добавить разные цвета в качестве границ для полигона svg? [Дубликат]

Question

CSS - можем ли мы добавить разные цвета в качестве границ для полигона svg? [Дубликат]

Я отправляю этот ответ, потому что мой интерфейс администратора Virtualmin / Webmin решил, что было бы неплохо отключить мой PHP-движок. Я нашел время, чтобы найти решение, поэтому я решил поделиться с ним вы, ребята:

Также не забудьте проверить, что ни один из ваших конфигурационных файлов вашего сайта, связанных с этим конкретным хостом или виртуальным хостом, не имеет в них php_admin_value, которые отключают PHP, например:

php_admin_value engine Off

В случае сомнений прокомментируйте это ...

# php_admin_value engine Off

И перезагрузите свой веб-сервер.

78

html css polygon

задан KyleMit 10 January 2015 в 01:52

3 ответа

Другие вопросы по тегам:

html css polygon

Похожие вопросы:

score 143 · Answer 1

Если вам нужен инсульт или без инсульта, вы также можете использовать stroke-dasharray , чтобы сделать тире и пробелы совпадающими с сторонами прямоугольника.

rect { fill: none; stroke: black; }
.top { stroke-dasharray: 0,50,150 }
.left { stroke-dasharray: 150,50 }
.bottom { stroke-dasharray: 100,50 }
.right { stroke-dasharray: 50,50,100 }

<svg height="300">
    <rect x="0.5" y="0.5" width="50" height="50" class="top"/>
    <rect x="0.5" y="60.5" width="50" height="50" class="left"/>
    <rect x="0.5" y="120.5" width="50" height="50" class="bottom"/>
    <rect x="0.5" y="180.5" width="50" height="50" class="right"/>
</svg>

См. jsfiddle .

143

ответ дан Erik Dahlström 21 August 2018 в 21:20

1

Это дьявольски блестящее решение. Жаль, что я не смог бы удвоить. Спасибо. – Factor Mystic 16 April 2012 в 20:25
2

Полюбите это, сработали и для меня. демон github наведите указатель мыши на точку, чтобы увидеть в действии. – Nate 26 March 2013 в 19:41
3

Горячий Черт, это изящно! – Roman 27 January 2015 в 13:59
4

Можешь ли ты настроить скрипку Эрика? Я пытаюсь вычислить тысячи (просто сплошная граница с одной стороны), но они не были в состоянии. – Taylor C. White 22 November 2015 в 00:05
5

@ TaylorC.White уверенная вещь, добавленная теперь. – Erik Dahlström 24 November 2015 в 11:58

score 26 · Answer 2

Вы не можете изменить визуальный стиль различных частей одной фигуры в SVG (отсутствие недоступного модуля Vector Effects ). Вместо этого вам нужно будет создать отдельные фигуры для каждого штриха или другого визуального стиля, который вы хотите изменить.

В частности, для этого случая вместо использования элемента <rect> или <polygon> вы можете создать <path> или <polyline>, который охватывает только три стороны прямоугольника:

<!-- Move to 50,50 then draw a line to 150,50, to 150,150, and then to 50,150 -->
<path d="M50,50 L150,50 150,150 50,150" />
<polyline points="50,50 150,50 150,150 50,150" />

Здесь вы можете увидеть эффект этих действий: http://jsfiddle.net/b5FrF/ 3 /

Red square with stroke on three sides [/g5]

Для получения дополнительной информации читайте о <polyline> и более- мощные, но более запутывающие фигуры <path> .

score 2 · Answer 3

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