Пятиугольник с фоном

[antonKar]

Друзьяши-поняши, нужна помощь.

У нас есть блок в виде повёрнутого правильного пятиугольник, (примерно вот такой)

И фон у него должен быть не красный, а картинка размером эдак 1000*1000 пикселей.

При этом видимая часть картинки должна ограничиваться гранями этого пятиугольника.

Это, я так понимаю, через SVG или canvas надо делать? Я просто ни с тем, ни с другим особо не знаком, решил попытаться сделать на canvas, но застопорился на этапе создания пятиугольника

Edited October 30, 2013 by antonKar

[SelenIT]

Можно выкрутиться через несколько вложенных оберток с overflow:hidden и разной трансформацией поворота (http://kizu.ru/fun/polygons/). Но если там огромная картинка — может быть напряжно для рендерера. Лучше на SVG.

[antonKar]

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1">
	 <defs>
		 <pattern id="img_patrickComp_patrick_cv1_Graphic3" height="2304" width="3072" patternUnits="userSpaceOnUse">
			 <image x="-30" y="-30" opacity="1" height="2304" width="3072" xlink:href="http://en.academic.ru/pictures/enwiki/72/Hoovernewbridge.jpg" />
		 </pattern>
	 </defs>
	 <polygon points="236,1 351,192 205,358 1,272 20,49" fill="url(#img_patrickComp_patrick_cv1_Graphic3)" />
</svg>

Разобрался. И координаты image нормально устанавливаются через JS. Всем спасибо.

Edited October 30, 2013 by antonKar

[SelenIT]

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

[Sensei]

можно как-нибудь так http://liveweave.com/egTlGt возможно, не совсем правильный пятиугольник вышел, подбирал на глаз)

[antonKar]

Плюс есть возможность анимировать эти вещи средствами самого SVG.

У меня это дело привязано к mousedown/mouseup на левом элементе в DOM-структуре, но спасибо за инфу

[Zverushka]

@SelenIT, А можно ли с этой штукой - через несколько слоев - задавать картинку не через background, а просто - ее вставляешь в сам html, а она уже обрезается?

[SelenIT]

Полагаю, да. Мы даже вроде не так давно похожий пример разбирали)

[Zverushka]

так вроде один раз можно повернуть и все. Как же из этого сделать хексагон например?

[SelenIT]

Почему, поворачивать можно столько раз, сколько нужно. Главное, чтобы суммарный угол всех поворотов был равен нулю (картинка вернулась в норм. положение).

[Zverushka]

Жесть, как тяжело мне дается эта тема). Но кажется, теперь дошло, с 10й попытки =)....

[antonKar]

По спецификации, эти свойства вроде как помечены как readonly

В ходе экспериментов выяснил, что jQuery 2.0.3 некорректно меняет в Opera 12 параметр «xlink:href» у image (как бы меняет, но Opera отображает старую картинку), надо через нативный JS менять. А так всё норм, всё меняется.

Edited October 31, 2013 by antonKar