Проблем, применяющие clipPath к элементу изображения с преобразованием

Для жизни меня я не могу понять, почему SVG не будет оказывать следующие графики:Проблем, применяющие clipPath к элементу изображения с преобразованием

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="1636px" height="911px" viewBox="0 0 623316 347091"> 
<clipPath id="randompath"> 
      <path d="M 6096 82296 C 6096 40211.90206289354 48740.87757861691 6096 101345.99999999999 6095.999999999988 153951.12242138304 6095.999999999977 196596.00000000003 40211.9020628935 196596.00000000003 82295.99999999996 196596.00000000003 124380.09793710642 153951.1224213831 158495.99999999997 101346.00000000001 158495.99999999997 48740.87757861695 158495.99999999997 6096.000000000012 124380.09793710642 6096 82295.99999999997 Z"/> 
</clipPath> 
<image x="0" y="0" height="500px" width="500px" xlink:href="http://www.cutepandapictures.com/wp-content/uploads/2012/07/babypandahugsatree.jpg" transform="matrix(381,0,0,381,6096,6096)" clip-path="url(#randompath)"/> 
</svg>

я обнаружил следующие две вещей:

Изображение обрезается правильно, когда клип-путь является основным кругом.
Изображение отображается правильно, если клип не установлен.

Доступна демо функционального кода here.

РЕДАКТИРОВАТЬ: Путь внутри клипаPath отображает должным образом самостоятельно. Я подозреваю, что это не будет отображаться, потому что согласно this, клип-путь визуализируется относительно обрезаемого изображения, а не из окна просмотра.

источник

2013-10-25 Zach

SVG! = CSS. После того, как вы установите единицы просмотра в SVG, эти единицы обычно переопределяют любые единицы, указанные в остальной части документа (например, те «px» в вашем <image>). SVG читает эти значения «500 пикселей» и 500 единиц ViewBox (что в вашем случае составляет 1/600-е пиксель (1636/623316), а затем применяет преобразование, которое масштабирует его на 381x и перемещает его на 6096 единиц виджетов (ака о 10pixels) по х и у.

Но ваша реальная проблема заключается в том, что clipPath единицы наследованию, что преобразование (например, те клип единицы интерпретируются как единицы в (623316 х 381) ширина контейнера !!)

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

<image x="0" y="0" height="323000" width="150000" 
    xlink:href="http://www.cutepandapictures.com/wp- 
    content/uploads/2012/07/babypandahugsatree.jpg" clip-path="url(#randompath)"/>

В качестве альтернативы, разделите все значения пути к клику на 500'ish, и вы увидите результат, который начинает иметь смысл. Вот пример с номерами путей клика, разделенными на 1000 (просто было просто переместить десятичную точку): http://jsfiddle.net/reU7t/

источник

2013-10-25 20:51:37

Как бы вы могли конвертировать между единицами, тем более что с пикселями нет определенного диапазона (т.е. пиксели идут от 0 до бесконечности теоретически)? – Zach

К сожалению, после преобразования значений пикселей он по-прежнему не отображается правильно. – Zach

Майкл прав. Ваш clipPath определяется в системе координат, в которую вы преобразуете свой образ. Но он также получает преобразование, применяемое к нему, поэтому оно заканчивается в 381 раз слишком большим. Решение состоит в том, чтобы (а) использовать решение Майкла; (b) определите свой ClipPath в тех же единицах, что и ваше изображение (т. е. ширина и высота, то же самое, что и изображение), или (c) оберните изображение в элемент группы и примените к нему клип. См .: http://jsfiddle.net/rw6R2/1/ –

Проблем, применяющие clipPath к элементу изображения с преобразованием

ответ

Смежные вопросы