Почему изображение не масштабируется должным образом в SVG? - PullRequest
Новая
       20

Почему изображение не масштабируется должным образом в SVG?

0 голосов
/ 22 января 2019

Я принимаю входные данные (x, y, высоту и ширину) от пользователя для создания динамического img в SVG через javascript .

Работает нормально, но высота и ширина не масштабируются в соответствии со значением (они действуют как отступ по всему изображению). Высота и ширина не увеличивается и не уменьшается.

Вот мой код (относится только к вопросу): 

Grp = document.createElementNS('http://www.w3.org/2000/svg', 'g')
Grp.setAttributeNS(null, "id", "newGrp");
svg.appendChild(Grp);

Img = document.createElementNS('http://www.w3.org/2000/svg', 'image');
Img.setAttributeNS(null, "id", "newImg");
Img.setAttributeNS(null, "x", x);
Img.setAttributeNS(null, "y", y);
Img.setAttributeNS(null, "height", height);
Img.setAttributeNS(null, "width", width);
Img.setAttributeNS(null, "style", "height:" + height + "px;width:" + width+"px;");
//Img .setAttributeNS(null, "style", "background-size:" + height + " " + width + ";");
Img .setAttributeNS('http://www.w3.org/1999/xlink', "href", PathofImage);
Grp.appendChild(Img);

Вот как выглядит SVG 

<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
width="500" height="100" overflow="visible" x="500" 
y="500" viewBox="0 0 700 700"> 
<g id="newGrp">
 <image id="newImg" x="108.3" y="375.3" height="48.5" width="144.3" 
 style="background-size:38.5 134.3;" 
 xlink:href="pathofImage"></image>  
<g>
<svg>

Я также пробовал использовать фоновый размер, но он также не работает.

Как мне этого добиться?

Ответы [ 3 ]

0 голосов
/ 22 января 2019

Это происходит потому, что ширина и высота вашего элемента svg не совпадают с viewbox. В вашем случае viewBox="0 0 700 700" Это означает, что ваш холст SVG начинается с (0,0) и имеет ширину 700 пользовательских единиц и высоту 700 пользовательских единиц. Размер вашего SVG width="500" height="100". Для соответствия wiewBox вам понадобится width="500" height="500" или width="100" height="100"

Пожалуйста, посмотрите, что происходит с прямоугольником того же размера, что и окно просмотра: 

svg{border:1px solid;}
<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
width="500" height="100" overflow="visible" x="500" 
y="500" viewBox="0 0 700 700"> 

<rect width="700" height="700" />

</svg>

Может быть, это то, что вам нужно: 

svg{border:1px solid;}
<svg xmlns:xlink="http://www.w3.org/1999/xlink" 
xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" 
 overflow="visible" viewBox="0 0 700 700"> 
<g id="newGrp">
  <rect x="108.3" y="375.3" height="48.5" width="144.3" fill="none" stroke="black" />
 <image id="newImg" x="108.3" y="375.3" height="48.5" width="144.3" 
 style="background-size:38.5 134.3;" 
 xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/%20BrianArnesen.svg"></image>  
<g>
<svg>

В качестве альтернативы вы можете изменить viewBox на что-то вроде viewBox="0 0 500 100"

0 голосов
/ 22 января 2019

Вам необходимо установить preserveAspectRatio на image, например 

preserveAspectRatio="xMidYMid slice"
0 голосов
/ 22 января 2019

Можете ли вы попробовать использовать% вместо px?

Также проверьте, обновляются ли высота и ширина, проверив изображение из инструмента разработчика.

Кроме того, попробуйте обновить значение атрибута из инструмента разработчика и посмотрите, какой из них работает нормально.

...