我的svg圈子重复图像背景

我做错了什么？背景设置不正确。我的svg圈子重复图像背景

<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    width="1101px" height="617px" viewBox="0 0 1101 617" enable-background="new 0 0 1101 617" xml:space="preserve"> 
     <defs> 
     <pattern id="image" patternUnits="userSpaceOnUse" height="150" width="150"> 
      <image x="30" y="0" height="150" width="150" xlink:href="http://i.imgur.com/7Nlcay7.jpg"></image> 
     </pattern> 
     </defs> 

    <circle fill="url(#image)" stroke="#676467" stroke-width="3" stroke-miterlimit="10" cx="186.051" cy="489.94" r="63.29"/> 
</svg>

样品： http://prntscr.com/amjogg

来源

2016-03-31 justdee

你能解释为什么你的svg需要是1101x617吗？当我将svg高度和宽度与图像匹配并将圆圈偏移一半时，所有内容都排成一行：http://codepen.io/angeliquejw/pen/RaLWZQ?editors=1000 – Angelique

您正在使用的图像作为填充图案，所以也没有伸展或任何东西。您可以使用图像中的x和y来设置图案中的图像位置，这可以在图案中设置填充。然后模式被应用。

在你的情况下，你有一个150x150图案，150x150的图像向右偏移30像素，所以图案看起来像120像素的图像，左边是30像素白色填充。

不知道你的意图是什么，我不知道在你的上下文中“正确”意味着什么。

来源

2016-03-31 20:36:47

我将x设置为0.通过“正确“我的意思是图片居中。我如何设计xml ？例如，将图片10px顶部。 – justdee

好吧，对于我的测试，我添加了代码来移动圆圈。背景不随着圆圈移动。所以我看到的唯一解决方案是将图案的位置更改为与圆的相同（减去半径） –

是否可以通过css？ – justdee

我的svg圈子重复图像背景

回答

相关问题