Question

我想出了这个SVG图像。

<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

   <def>
   </def>
        <g id="i-define-a-black-ring-yellow" fill="#img10"  transform="translate(20.000000, 20.000000)">
            <g id="Group">
                <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">

                </circle>
                <circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">

                </circle>
                <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
            </g>
        </g>
</svg>

在这里小提琴：http://jsfiddle.net/9zkfodwp/1377/

现在，我想要一个圆圈内的图像。所以，我尝试使用clip-path1，代码如下：但是，此图片不会显示在此处。

<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

   <def>
            <clipPath id="myCircle">
               <circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">
               </circle>
            </clipPath>
   </def>
    <g id="i-define-a-black-ring-yellow" fill="#img10"  transform="translate(20.000000, 20.000000)">
        <g id="Group">
            <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">

            </circle>
             <image width="50" height="35" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" />
            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
        </g>
    </g>
</svg>

在这里小提琴：http://jsfiddle.net/9zkfodwp/1380/

我的问题是：

Chrome不会像上面那样显示图像。

小提琴中的那个 - 实际上并不适合一个圆圈。图像呈方形。

（书中的图像是矩形的 - 不应该在圆圈内吗？我们用图像填充圆圈？

对于在这方面应该做些什么的任何想法都将不胜感激。

Answer 1

你的小提琴有几个问题：

是<defs>，而不是<def>。整个部分被忽略了。
您的图片和剪辑路径圈位于不同的位置。他们没有彼此重叠。我已将<image>更新为以剪辑路径圈为中心。

<svg width="250px" height="250px" viewBox="0 0 250 250" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>
    <clipPath id="myCircle">
      <circle id="Oval" cx="171" cy="31" r="16"/>
    </clipPath>
  </defs>

  <g id="i-define-a-black-ring-yellow" fill="#img10"  transform="translate(20.000000, 20.000000)">
    <g id="Group">
      <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100"/>
      <image x="146" y="14" width="50" height="35"
             xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg"
             clip-path="url(#myCircle)" />
      <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
    </g>
  </g>

</svg>

Answer 2

这是你想要做的事情。

你需要在x-y轴上翻转图像，你可以通过添加比例并添加转换来实现。

检查此代码：

<svg width="350px" height="350px" viewBox="0 0 350 350" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

   <def>
            <clipPath id="myCircle">
               <circle id="Oval" fill="#228B22" fill-rule="nonzero" cx="171" cy="31" r="16">
               </circle>
            </clipPath>
   </def>
    <g id="i-define-a-black-ring-yellow" fill="#img10"  transform="translate(20.000000, 20.000000)">
        <g id="Group" >
            <circle id="Oval" stroke="#ff0000" stroke-width="2" cx="100" cy="100" r="100">

            </circle>
             <image width="50" height="35" xlink:href="https://www.tutorialspoint.com/videotutorials/images/coding_ground_home.jpg" clip-path="url(#myCircle)" transform="scale (-1, 1) translate(-60, 45)" />
            <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="360 100 100" begin="0s" dur="10s" repeatDur="indefinite"/>
        </g>
    </g>
</svg>

如何在SVG中添加图像？

2 个答案: