На других браузерах включая мобильные все выглядит отлично, а вот на
IOS режется. Именно на всех браузерах IOS. Кто может подсказать в чем
дело
Есть две потенциальные ошибки, которые могут не обрабатываться Safari
- В градиенте не задано значение первое значение
stop offset ="0"
было:
<stop stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>
изменить на:
<stop offset="0" stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>
- В фильтре
feColorMatrix
указано ошибочное значение 127
непрозрачности, которое не может быть больше 1
Было:
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
Изменить на:
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
Попробуйте, измененный код, мне к сожалению не на чем проверить.
<svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M318 175C318 206.596 307.235 237.25 287.48 261.909C267.724 286.568 240.157 303.76 209.322 310.652C178.486 317.545 146.223 313.726 117.848 299.826C89.474 285.925 66.6821 262.773 53.229 234.183C39.776 205.594 36.4646 173.274 43.8406 142.551C51.2166 111.828 68.8399 84.5341 93.8059 65.1685C118.772 45.8028 149.591 35.5209 181.183 36.0171C212.776 36.5134 243.256 47.7584 267.602 67.8986L179 175H318Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="358" height="358" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="20"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.72549 0 0 0 0 0.788235 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="179" y1="36" x2="179" y2="314" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>
</linearGradient>
</defs>
</svg>
Update
- Наиболее вероятной причиной обрезания изображения может быть Filter effects region (зона действия фильтра)
При недостаточной ширине или высоте зоны действия фильтра изображение может быть обрезано. Попробуйте увеличить атрибуты width
, height
и/или подвинуть верхний угол региона x
, y
<filter id="filter0_d" x="0" y="0" width="358" height="358"
Для примера, я сделаю меньше зону действия фильтра 358 -> 300
и изображение обрежется:
<svg width="358" height="358" viewBox="0 0 358 358" fill="none" xmlns="http://www.w3.org/2000/svg">
<g filter="url(#filter0_d)">
<path d="M318 175C318 206.596 307.235 237.25 287.48 261.909C267.724 286.568 240.157 303.76 209.322 310.652C178.486 317.545 146.223 313.726 117.848 299.826C89.474 285.925 66.6821 262.773 53.229 234.183C39.776 205.594 36.4646 173.274 43.8406 142.551C51.2166 111.828 68.8399 84.5341 93.8059 65.1685C118.772 45.8028 149.591 35.5209 181.183 36.0171C212.776 36.5134 243.256 47.7584 267.602 67.8986L179 175H318Z" fill="url(#paint0_linear)"/>
</g>
<defs>
<filter id="filter0_d" x="0" y="0" width="300" height="300" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
<feOffset dy="4"/>
<feGaussianBlur stdDeviation="20"/>
<feColorMatrix type="matrix" values="0 0 0 0 0.203922 0 0 0 0 0.72549 0 0 0 0 0.788235 0 0 0 1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
</filter>
<linearGradient id="paint0_linear" x1="179" y1="36" x2="179" y2="314" gradientUnits="userSpaceOnUse">
<stop stop-color="#2197A5"/>
<stop offset="1" stop-color="#3DC8D9"/>
</linearGradient>
</defs>
</svg>
Update2 по комментарию
Да действительно причиной была 3 пункт. На адаптиве я уменьшал размеры
svg путем css, но значения width и height для filter оставались
неизменными, пришлось задать и для них изменения.
Лучше задавать filter region в процентах width="120%" height="120%" x="-20%" y="-20%"
(Эти значения по умолчанию) filterUnits="userSpaceOnUse"
- в этом случае указывать нельзя (просто удалите)