Внешнее выравнивание SVG полупрозрачного хода [дубликат]

Ниже приведена работа для внутренней границы rect с использованием symbol и use.

Пример: https://jsbin.com/yopemiwame/edit?html,output

SVG:

<svg>
  <symbol id="inner-border-rect">
    <rect class="inner-border" width="100%" height="100%" style="fill:rgb(0,255,255);stroke-width:10;stroke:rgb(0,0,0)">
  </symbol>
  ...
  <use xlink:href="#inner-border-rect" x="?" y="?" width="?" height="?">
</svg>

Примечание: Обязательно замените ? в use на реальные значения.

Фон: Причина этого заключается в том, что символ устанавливает новый видовой экран, заменяя symbol на svg и создавая элемент в DOM тени. Этот svg теневой DOM затем привязан к вашему текущему элементу SVG. Обратите внимание, что svg s может быть вложенным, и каждый svg создает новый видовой экран, который скопирует все, что перекрывается, включая перекрывающуюся границу. Для более подробного обзора того, что происходит, прочитайте эту фантастическую статью Сарой Сауидан.

Я нашел простой способ, который имеет несколько ограничений, но работал для меня:

• определить форму в defs
• определить путь клипа, ссылающийся на форму
• использовать его и удвоить ход, поскольку наружу обрезается

Здесь приведен рабочий пример:

<defs>
    <path id="ld" d="M256,0 L0,512 L384,512 L128,1024 L1024,384 L640,384 L896,0 L256,0 Z"/>
    <clipPath id="clip">
        <use xlink:href="#ld"/>
    </clipPath>
</defs>
<g>
    <use xlink:href="#ld" stroke="#0081C6" stroke-width="160" fill="#00D2B8" clip-path="url(#clip)"/>
</g>

Возможное решение A (грязное) - с помощью шаблонов,

- пример с треугольником с внутренним гладкостью:

https://jsfiddle.net/qr3p7php / 5 /

<style>
#triangle1{
  fill: #0F0;
  fill-opacity: 0.3;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 20;
}
#triangle2{
  stroke: #f00;
  stroke-opacity: 1;
  stroke-width: 1;
}    
</style>

<svg height="210" width="400" >
    <pattern id="fagl" patternUnits="objectBoundingBox" width="2" height="1" x="-50%">
        <path id="triangle1" d="M150 0 L75 200 L225 200 Z">
    </pattern>    
    <path id="triangle2" d="M150 0 L75 200 L225 200 Z" fill="url(#fagl)"/>
</svg>

UPDATE: атрибут stroke-alignment был 1 апреля перенесен в совершенно новую спецификацию, называемую SVG Strokes .

Начиная с проекта редактора SVG 2.0 от 26 февраля 2015 года (и, возможно, с 13 февраля ), свойство stroke-alignment присутствует со значениями inner, center (по умолчанию) и outer.

Кажется, что он работает так же, как свойство stroke-location, предложенное @Phrogz и последним stroke-position предложением . Это свойство было запланировано, по крайней мере, с 2011 года, но кроме аннотации, что

SVG 2 должен включать способ указания положения хода

, это никогда не был детализирован в спецификации, как это было отложен - до сих пор, кажется.

Ни один браузер не поддерживает это свойство или, насколько мне известно, любой из новых Возможности SVG 2, однако, но, надеюсь, скоро они появятся по мере появления спецификации. Это было свойство, которое я лично хотел получить, и я очень рад, что он наконец появился в спецификации.

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

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

[/g4]

Как я заметил в предложении

• , вы можете достичь того же визуального результата, что и «внутри», удвоив ширину вашего штриха, а затем используя обтравочный контур, чтобы обрезать объект сам по себе, и
• вы можете достичь того же визуального результата, что и «снаружи», удвоив ширину штриха, а затем наложив на него нерабочую копию объекта.

Изменить: этот ответ может быть неправильным в будущем. Достичь этих результатов можно с помощью SVG Vector Effects , объединив veStrokePath с veIntersect (для «внутри») или с veExclude (для «снаружи»). Тем не менее, векторные эффекты по-прежнему являются рабочим модулем проекта, в котором нет никаких реализаций, которые я еще могу найти.

Редактирование 2: черновик спецификации SVG 2 включает свойство stroke-alignment (с центром | внутри | вне возможных значений). Это свойство может превратить его в UA в конечном счете.

Редактировать 3: забавно и разочаровывающе, рабочая группа SVG удалила stroke-alignment из SVG 2. Вы можете увидеть некоторые из проблем, описанных после прозы здесь .

Я не знаю, насколько это полезно, но в моем случае я просто создал еще один круг с рамкой и поместил его «внутри» другой фигуры.

Вот функция, которая рассчитает, сколько пикселей вам нужно добавить - используя данный штрих - вверху, справа, внизу и влево, все на основе браузера:

var getStrokeOffsets = function(stroke){

        var strokeFloor =       Math.floor(stroke / 2),                                                                 // max offset
            strokeCeil =        Math.ceil(stroke / 2);                                                                  // min offset

        if($.browser.mozilla){                                                                                          // Mozilla offsets

            return {
                bottom:     strokeFloor,
                left:       strokeFloor,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }else if($.browser.webkit){                                                                                     // WebKit offsets

            return {
                bottom:     strokeCeil,
                left:       strokeFloor,
                top:        strokeFloor,
                right:      strokeCeil
            };

        }else{                                                                                                          // default offsets

            return {
                bottom:     strokeCeil,
                left:       strokeCeil,
                top:        strokeCeil,
                right:      strokeCeil
            };

        }

    };

Как отмечали выше люди, вам придется либо пересчитать смещение в координаты пути удара, либо удвоить его ширину, а затем замаскировать одну или другую сторону, потому что SVG не только поддерживает выравнивание инсультатора Illustrator, но PostScript doesn Это тоже.

Спецификация штрихов в редакции Adobe PostScript Manual 2nd edition гласит: «4.5.1 Stroking: оператор хода рисует линию некоторой толщины вдоль текущего пути. Для каждого прямого или изогнутого сегмента на пути, штрих рисует линию, которая центрирована на сегменте со сторонами , параллельными сегменту. " (выделение их)

Остальная часть спецификации не имеет атрибутов для смещения позиции линии. Когда Illustrator позволяет вам выровнять внутри или снаружи, он пересчитывает смещение фактического пути (потому что он все же вычислительно дешевле, чем надпечатка, затем маскировка). Координаты пути в документе .ai являются справочными, а не то, что растрируется или экспортируется в окончательный формат.

Поскольку собственный формат Inkscape является спецификацией SVG, он не может предложить функцию, которой не хватает.

Вы можете использовать CSS для создания порядка инсульта и заполнения. То есть, сначала ударьте, а затем заполните второй и получите желаемый эффект.

MDN на paint-order: https://developer.mozilla.org/en-US/docs/Web/ SVG / Attribute / paint-order

Код CSS:

paint-order: stroke;