Question

我做错了什么？背景没有正确设置。

<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

Answer 1

您正在使用图像作为填充图案，因此它不会拉伸或任何东西。您可以在图像中使用x和y来设置图案中的图像位置，这样可以在图案中设置填充。然后应用模式。

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

在不知道你的意图是什么的情况下，我不知道在你的背景下“正确”意味着什么。

我的svg圈重复图像背景

1 个答案: