Назначение в css атрибутов svg не работает в Firefox
Имеется следующий код.
path
{
fill: url(#bgr);
}
#myImg
{
x: -10;
y: -10;
}
<div class="add">
<svg version="1.0" id="sloy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" rect x="0px" y="0px"
viewBox="0 0 1000 900" width=900 height=600>
<g>
<defs>
<pattern id="bgr" patternUnits="userSpaceOnUse" width="100" height="100">
<image id="myImg" href="http://img-fotki.yandex.ru/get/6447/5091629.86/0_74298_17a84446_L.jpg"></image>
</pattern>
</defs>
<path d="M537,254.8c1.1,0.2,1.7,0.7,1.7,1.7c-18.1,15.1-30.5,27.5-37.2,37.2h0.8c0.7,0,8.2-7.4,22.3-22.3c0.6,0,5.3-3.6,14.1-10.8
v0.8l1.6-0.8h0.8v1.7l-13.2,14.9h0.8c2.5-2.2,3.8-3.4,4.1-3.4h0.8v0.8L429.5,387.1c0,0.9-0.6,2-1.7,3.4h1.7
c0-1.4,4.1-5.8,12.4-13.2c13.2-14.5,24.5-26.1,33.9-34.7c0.4-2.2,17.8-20.4,52.1-54.7v0.8c-45.8,49.2-97.3,103.5-154.6,162.9
l-49.6,57.1l-0.8-1.7c1.3-2.9,3.2-5.9,5.8-9v-0.8l-13.2,13.2h-0.8c-3.8-2.6-5.8-4.3-5.8-4.9c0.9-1.8,3.1-4.9,6.6-9.1
c0-1.3-0.3-2.4-0.8-3.4c2.2-4.2,4.4-11.6,6.6-22.2c16.6-53.2,33.7-99.2,51.3-138.1c5-9.8,8-16.7,9.1-20.7h0.8l1.6,0.8
c5.3-12.7,8.6-19.9,10-21.5h0.8v1.7c0,1.4-0.6,3.1-1.7,4.9c0,0.6,0.3,1.4,0.8,2.5c-3.3,11-5.8,17.9-7.4,20.7v1.6h0.8l15.7-38h1.6
v0.8c-1,3.5-1.6,5.7-1.6,6.6c1,0.2,1.6,0.7,1.6,1.7l-2.4,6.6l1.7,0.7c0-2.2,0.5-3.2,1.6-3.2v1.7l-2.4,9c0.6,1.1,0.8,2,0.8,2.5
c-23.2,52.5-40,95.8-50.4,129.8h0.8c25.8-31.6,60.5-69.7,104.1-114.1c6.3-6.3,25.3-27,57.1-62c4.6-5.2,7.7-8,9.1-8.3
c1,0.2,1.6,0.7,1.6,1.7c-20.3,19-30.5,29.7-30.5,32.2c11-9.8,18.9-17.8,23.9-24h0.8c1.1,0.6,2,0.8,2.5,0.8L537,254.8z M328.6,495.4
v0.8h1.7l2.5-3.4v-0.7C330.8,494.4,329.4,495.4,328.6,495.4z M336.9,442.6l-0.8,4.1c1.1,0,1.7-0.8,1.7-2.5v-1.6H336.9z
M337.8,440.9v0.8h0.8c1-4.1,2-6.8,3.2-8.3v-0.8C340.8,432.6,339.4,435.4,337.8,440.9z M354.3,417.7c0,2.8-4.4,14.4-13.3,34.7v1.7
c1.8,0,6.8-12.1,14.9-36.4H354.3z M347.7,466.5v0.8c0.7,0,1.5-0.8,2.4-2.5v-0.7C349.3,464.1,348.5,464.9,347.7,466.5z M357.6,397.9
l-6.6,19.8v0.8h0.8c0-1.3,2.2-7.9,6.6-19.8v-0.8H357.6z M356.7,455.8v0.8h1.7c0-0.6,0.3-1.5,0.8-2.5h-0.8
C357.3,454.3,356.7,454.8,356.7,455.8z M361.8,387.1c-1.1,3.5-1.7,5.5-1.7,5.9c1.1,0,1.9-1.7,2.4-5v-0.8H361.8z M371.6,375.6
c-5,13-8,20.4-9.1,22.3v2.4h0.8l9.1-23.9v-0.8H371.6z M364.2,448.4h1.7c0-1,0.8-2.4,2.5-4.2h-0.8
C366.4,444.4,365.3,445.8,364.2,448.4z M376.5,433.5c-5,5-7.4,8.2-7.4,9.8c5.4-6,8.4-9,9.1-9v-0.8H376.5z M399.7,307.8L375,366.4
v0.8h1.6c13.9-33.6,21.9-52.3,24-56.2v-3.2H399.7z M380.8,429.3h1.7c0-1.6,0.8-2.4,2.4-2.4v-1.7
C384.1,425.2,382.8,426.5,380.8,429.3z M387.4,421.1v1.6c8.2-7.4,15.6-15.4,22.3-23.9v-0.8c-0.7,0-7.9,7.7-21.5,23.2H387.4z
M408.9,299.5v1.6c-2.5,5.5-4.1,8.3-4.9,8.3v-1.6C406.4,302.3,408.1,299.5,408.9,299.5z M417.1,389.6h0.8c0.7,0,2.1-1.4,4.1-4.1
h-0.8L417.1,389.6z M456.8,339.2c-2.2,2.5-3.2,3.9-3.2,4.2h0.7l3.4-4.2H456.8z M464.2,331.7v0.8c0.8,0,2.4-1.6,4.9-4.9h-0.7
C467.6,327.6,466.2,329,464.2,331.7z M520.4,283.8c0,1.1-0.6,1.7-1.7,1.7v1.6c0.9,0,2-1.1,3.4-3.2H520.4z"/>
</g>
</svg>
</div>
</div>
</div>
Содержимое #myImg не работает в браузере firefox. Как сделать так чтобы заработало?)
Ответы (1 шт):
Автор решения: Alexandr_TT
→ Ссылка
В CSS не поддерживаются атрибуты SVG x="", y="", width, height, cx, cy r для базовых фигур SVG и для тега SVG <image> Если их указать в CSS свойствах они будут проигнорированы, что показывает ваш пример.
#myImg
{
x: -10;
y: -10;
}
Попробуйте изменить иx значения и ничего не изменится.
Но если вы укажете <image id="myImg" x="120" y="-100", то верхний угол изображения будет перемещён вправо на 120px и вверх на 100px
path
{
fill: red;
}
<div class="add">
<svg version="1.0" id="sloy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" rect x="0px" y="0px"
viewBox="0 0 1000 900" width=900 height=600>
<g>
<image id="myImg" x="120" y="-100" href="http://img-fotki.yandex.ru/get/6447/5091629.86/0_74298_17a84446_L.jpg"></image>
<path d="M537,254.8c1.1,0.2,1.7,0.7,1.7,1.7c-18.1,15.1-30.5,27.5-37.2,37.2h0.8c0.7,0,8.2-7.4,22.3-22.3c0.6,0,5.3-3.6,14.1-10.8
v0.8l1.6-0.8h0.8v1.7l-13.2,14.9h0.8c2.5-2.2,3.8-3.4,4.1-3.4h0.8v0.8L429.5,387.1c0,0.9-0.6,2-1.7,3.4h1.7
c0-1.4,4.1-5.8,12.4-13.2c13.2-14.5,24.5-26.1,33.9-34.7c0.4-2.2,17.8-20.4,52.1-54.7v0.8c-45.8,49.2-97.3,103.5-154.6,162.9
l-49.6,57.1l-0.8-1.7c1.3-2.9,3.2-5.9,5.8-9v-0.8l-13.2,13.2h-0.8c-3.8-2.6-5.8-4.3-5.8-4.9c0.9-1.8,3.1-4.9,6.6-9.1
c0-1.3-0.3-2.4-0.8-3.4c2.2-4.2,4.4-11.6,6.6-22.2c16.6-53.2,33.7-99.2,51.3-138.1c5-9.8,8-16.7,9.1-20.7h0.8l1.6,0.8
c5.3-12.7,8.6-19.9,10-21.5h0.8v1.7c0,1.4-0.6,3.1-1.7,4.9c0,0.6,0.3,1.4,0.8,2.5c-3.3,11-5.8,17.9-7.4,20.7v1.6h0.8l15.7-38h1.6
v0.8c-1,3.5-1.6,5.7-1.6,6.6c1,0.2,1.6,0.7,1.6,1.7l-2.4,6.6l1.7,0.7c0-2.2,0.5-3.2,1.6-3.2v1.7l-2.4,9c0.6,1.1,0.8,2,0.8,2.5
c-23.2,52.5-40,95.8-50.4,129.8h0.8c25.8-31.6,60.5-69.7,104.1-114.1c6.3-6.3,25.3-27,57.1-62c4.6-5.2,7.7-8,9.1-8.3
c1,0.2,1.6,0.7,1.6,1.7c-20.3,19-30.5,29.7-30.5,32.2c11-9.8,18.9-17.8,23.9-24h0.8c1.1,0.6,2,0.8,2.5,0.8L537,254.8z M328.6,495.4
v0.8h1.7l2.5-3.4v-0.7C330.8,494.4,329.4,495.4,328.6,495.4z M336.9,442.6l-0.8,4.1c1.1,0,1.7-0.8,1.7-2.5v-1.6H336.9z
M337.8,440.9v0.8h0.8c1-4.1,2-6.8,3.2-8.3v-0.8C340.8,432.6,339.4,435.4,337.8,440.9z M354.3,417.7c0,2.8-4.4,14.4-13.3,34.7v1.7
c1.8,0,6.8-12.1,14.9-36.4H354.3z M347.7,466.5v0.8c0.7,0,1.5-0.8,2.4-2.5v-0.7C349.3,464.1,348.5,464.9,347.7,466.5z M357.6,397.9
l-6.6,19.8v0.8h0.8c0-1.3,2.2-7.9,6.6-19.8v-0.8H357.6z M356.7,455.8v0.8h1.7c0-0.6,0.3-1.5,0.8-2.5h-0.8
C357.3,454.3,356.7,454.8,356.7,455.8z M361.8,387.1c-1.1,3.5-1.7,5.5-1.7,5.9c1.1,0,1.9-1.7,2.4-5v-0.8H361.8z M371.6,375.6
c-5,13-8,20.4-9.1,22.3v2.4h0.8l9.1-23.9v-0.8H371.6z M364.2,448.4h1.7c0-1,0.8-2.4,2.5-4.2h-0.8
C366.4,444.4,365.3,445.8,364.2,448.4z M376.5,433.5c-5,5-7.4,8.2-7.4,9.8c5.4-6,8.4-9,9.1-9v-0.8H376.5z M399.7,307.8L375,366.4
v0.8h1.6c13.9-33.6,21.9-52.3,24-56.2v-3.2H399.7z M380.8,429.3h1.7c0-1.6,0.8-2.4,2.4-2.4v-1.7
C384.1,425.2,382.8,426.5,380.8,429.3z M387.4,421.1v1.6c8.2-7.4,15.6-15.4,22.3-23.9v-0.8c-0.7,0-7.9,7.7-21.5,23.2H387.4z
M408.9,299.5v1.6c-2.5,5.5-4.1,8.3-4.9,8.3v-1.6C406.4,302.3,408.1,299.5,408.9,299.5z M417.1,389.6h0.8c0.7,0,2.1-1.4,4.1-4.1
h-0.8L417.1,389.6z M456.8,339.2c-2.2,2.5-3.2,3.9-3.2,4.2h0.7l3.4-4.2H456.8z M464.2,331.7v0.8c0.8,0,2.4-1.6,4.9-4.9h-0.7
C467.6,327.6,466.2,329,464.2,331.7z M520.4,283.8c0,1.1-0.6,1.7-1.7,1.7v1.6c0.9,0,2-1.1,3.4-3.2H520.4z"/>
</g>
</svg>
</div>
Но у вас изображение добавлено в pattern, поэтому нужно двигать path, который обрезает изображение.
<g transform="translate(-400, -200)">
path
{
fill: url(#bgr);
}
<div class="add">
<svg version="1.0" id="sloy" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" rect x="0px" y="0px"
viewBox="0 0 1000 900" width="900" height="600">
<defs>
<pattern id="bgr" patternUnits="userSpaceOnUse" width="100" height="100">
<image id="myImg" href="http://img-fotki.yandex.ru/get/6447/5091629.86/0_74298_17a84446_L.jpg"></image>
</pattern>
</defs>
<g transform="translate(-400, -200)">
<path d="M537,254.8c1.1,0.2,1.7,0.7,1.7,1.7c-18.1,15.1-30.5,27.5-37.2,37.2h0.8c0.7,0,8.2-7.4,22.3-22.3c0.6,0,5.3-3.6,14.1-10.8
v0.8l1.6-0.8h0.8v1.7l-13.2,14.9h0.8c2.5-2.2,3.8-3.4,4.1-3.4h0.8v0.8L429.5,387.1c0,0.9-0.6,2-1.7,3.4h1.7
c0-1.4,4.1-5.8,12.4-13.2c13.2-14.5,24.5-26.1,33.9-34.7c0.4-2.2,17.8-20.4,52.1-54.7v0.8c-45.8,49.2-97.3,103.5-154.6,162.9
l-49.6,57.1l-0.8-1.7c1.3-2.9,3.2-5.9,5.8-9v-0.8l-13.2,13.2h-0.8c-3.8-2.6-5.8-4.3-5.8-4.9c0.9-1.8,3.1-4.9,6.6-9.1
c0-1.3-0.3-2.4-0.8-3.4c2.2-4.2,4.4-11.6,6.6-22.2c16.6-53.2,33.7-99.2,51.3-138.1c5-9.8,8-16.7,9.1-20.7h0.8l1.6,0.8
c5.3-12.7,8.6-19.9,10-21.5h0.8v1.7c0,1.4-0.6,3.1-1.7,4.9c0,0.6,0.3,1.4,0.8,2.5c-3.3,11-5.8,17.9-7.4,20.7v1.6h0.8l15.7-38h1.6
v0.8c-1,3.5-1.6,5.7-1.6,6.6c1,0.2,1.6,0.7,1.6,1.7l-2.4,6.6l1.7,0.7c0-2.2,0.5-3.2,1.6-3.2v1.7l-2.4,9c0.6,1.1,0.8,2,0.8,2.5
c-23.2,52.5-40,95.8-50.4,129.8h0.8c25.8-31.6,60.5-69.7,104.1-114.1c6.3-6.3,25.3-27,57.1-62c4.6-5.2,7.7-8,9.1-8.3
c1,0.2,1.6,0.7,1.6,1.7c-20.3,19-30.5,29.7-30.5,32.2c11-9.8,18.9-17.8,23.9-24h0.8c1.1,0.6,2,0.8,2.5,0.8L537,254.8z M328.6,495.4
v0.8h1.7l2.5-3.4v-0.7C330.8,494.4,329.4,495.4,328.6,495.4z M336.9,442.6l-0.8,4.1c1.1,0,1.7-0.8,1.7-2.5v-1.6H336.9z
M337.8,440.9v0.8h0.8c1-4.1,2-6.8,3.2-8.3v-0.8C340.8,432.6,339.4,435.4,337.8,440.9z M354.3,417.7c0,2.8-4.4,14.4-13.3,34.7v1.7
c1.8,0,6.8-12.1,14.9-36.4H354.3z M347.7,466.5v0.8c0.7,0,1.5-0.8,2.4-2.5v-0.7C349.3,464.1,348.5,464.9,347.7,466.5z M357.6,397.9
l-6.6,19.8v0.8h0.8c0-1.3,2.2-7.9,6.6-19.8v-0.8H357.6z M356.7,455.8v0.8h1.7c0-0.6,0.3-1.5,0.8-2.5h-0.8
C357.3,454.3,356.7,454.8,356.7,455.8z M361.8,387.1c-1.1,3.5-1.7,5.5-1.7,5.9c1.1,0,1.9-1.7,2.4-5v-0.8H361.8z M371.6,375.6
c-5,13-8,20.4-9.1,22.3v2.4h0.8l9.1-23.9v-0.8H371.6z M364.2,448.4h1.7c0-1,0.8-2.4,2.5-4.2h-0.8
C366.4,444.4,365.3,445.8,364.2,448.4z M376.5,433.5c-5,5-7.4,8.2-7.4,9.8c5.4-6,8.4-9,9.1-9v-0.8H376.5z M399.7,307.8L375,366.4
v0.8h1.6c13.9-33.6,21.9-52.3,24-56.2v-3.2H399.7z M380.8,429.3h1.7c0-1.6,0.8-2.4,2.4-2.4v-1.7
C384.1,425.2,382.8,426.5,380.8,429.3z M387.4,421.1v1.6c8.2-7.4,15.6-15.4,22.3-23.9v-0.8c-0.7,0-7.9,7.7-21.5,23.2H387.4z
M408.9,299.5v1.6c-2.5,5.5-4.1,8.3-4.9,8.3v-1.6C406.4,302.3,408.1,299.5,408.9,299.5z M417.1,389.6h0.8c0.7,0,2.1-1.4,4.1-4.1
h-0.8L417.1,389.6z M456.8,339.2c-2.2,2.5-3.2,3.9-3.2,4.2h0.7l3.4-4.2H456.8z M464.2,331.7v0.8c0.8,0,2.4-1.6,4.9-4.9h-0.7
C467.6,327.6,466.2,329,464.2,331.7z M520.4,283.8c0,1.1-0.6,1.7-1.7,1.7v1.6c0.9,0,2-1.1,3.4-3.2H520.4z"/>
</g>
</svg>
</div>