У меня возникла проблема с линейными градиентами, когда я добавляю его в обводку, он не отображается так, как при применении в качестве заливки. Я думаю, что это проблема: objectBoundingBox , где внизу этого раздела написано:
Ключевое слово objectBoundingBox не следует использовать, когда геометрия применимого элемента не имеет ширины или высоты, например, горизонтальная или вертикальная линия, даже если линия имеет фактическую толщину при просмотре из-за ненулевого значения ширина штриха, так как ширина штриха игнорируется при расчете ограничительной рамки. Когда геометрия применимого элемента не имеет ширины или высоты и указывается objectBoundingBox, данный эффект (например, градиент или фильтр) будет игнорироваться.
Позвольте мне показать вам:
Вот как выглядит прямоугольник с заливкой:
<svg name="scaled1box" overflow="visible" x="12.35" y="12.35" fill="url(#fillLinGrads0sp5)">
<defs>
<linearGradient id="fillLinGrads0sp5" x1="0" y1="0" x2="1" y2="1" >
<stop offset="0" stop-color="#7030A0" />
<stop offset="0.49" stop-color="#7030A0" />
<stop offset="0.5" stop-color="#FFFFFF" />
<stop offset="0.51" stop-color="#0070C0" />
<stop offset="1" stop-color="#0070C0" />
</linearGradient>
</defs>
<path d="M0,0L72,0L72,144L0,144Z" />
</svg>
Но с ударом вместо:
<svg name="scaled1box" overflow="visible" x="12.375" y="12.375" fill="none" stroke="url(#strokeLinGrads0sp5)" stroke-width="25" stroke-miterlimit="8">
<defs>
<linearGradient id="strokeLinGrads0sp5" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#7030A0" />
<stop offset="0.49" stop-color="#7030A0" />
<stop offset="0.5" stop-color="#FFFFFF" />
<stop offset="0.51" stop-color="#0070C0" />
<stop offset="1" stop-color="#0070C0" />
</linearGradient>
</defs>
<path d="M0,0L72,0L72,144L0,144Z" />
</svg>
Обратите внимание, что в случае с ходом угол "45 градусов" слегка отклонен. Я считаю, что это связано с тем, что ограничивающая рамка предназначена только для пути, а не для пути + ширина хода.
Хорошо, хорошо. Что теперь? Мне все еще нужно, чтобы это было для пути + ход + ширина.
Поэтому я попытался установить относительные координаты и не мог понять, как это будет работать. Значение, которое я установил, увеличило прямоугольник с w = 72, h = 144 до квадрата с w = 144, h = 144 и установил конечные точки x2="1" и y2="1 "там, где они будут относительно первоначальной ограничительной рамки - так x2="1.1736" и y2="1.1736 "(1,1736 = новый вес / час 169 (144 + 25 для ширины хода), деленный на старый вес / час 144.). Нет кости. Затем я попытался сместить начальную и конечную точки, чтобы учесть сначала преобразование, а затем масштаб. Опять не игра в кости.
Итак, я пошел искать. Это казалось действительно многообещающим , пока я не смог выяснить его переменные, такие как eps и т. П.
Итак, когда все остальное не удалось, я просто попытался обойти с цифрами. Это кажется близким.
<svg name="scaled1box" overflow="visible" x="12.375" y="12.375" fill="none" stroke="url(#strokeLinGrads0sp5)" stroke-width="25" stroke-miterlimit="8">
<defs>
<linearGradient id="strokeLinGrads0sp5" x1="-0.087" y1="-0.24" x2="1.17" y2="1.17">
<stop offset="0" stop-color="#7030A0" />
<stop offset="0.49" stop-color="#7030A0" />
<stop offset="0.5" stop-color="#FFFFFF" />
<stop offset="0.51" stop-color="#0070C0" />
<stop offset="1" stop-color="#0070C0" />
</linearGradient>
</defs>
<path d="M0,0L72,0L72,144L0,144Z" />
</svg>
Но я не уверен, как рассчитать это для всех начальных / конечных точек. Это было действительно просто дурачиться.
Опции:
- Откажитесь и вместо этого преобразуйте штрих в путь.
- Получите некоторую помощь от вас, чтобы выяснить, как перевести относительный или
абсолютные значения точек для размещения ширины штриха BB + с использованием начальных значений.