Question

我是SVG创作的初学者，并且已经研究了很长一段时间。我找到了一些很好的资源，但是我仍然有点朦胧，想要完成我想做的事情的最佳方法（也许SVG不是正确的答案 - 也许jQuery或CSS3更好）。

信息

我想要一系列等边的SVG三角形，我打算将它们用作图库的图像缩略图。当您将鼠标悬停在它们上方时，它会为您提供“标题”，然后您可以单击以查看整个项目（仍然可以在悬停时显示标题）。

有些图像是直立的，有些图像是倒置的（颠倒过来） - 虽然我还没有弄清楚如何做到这一点。

无论如何，我有一个带有三角形，图像和悬停效果的 fiddle 。将放置在三角形内的所有图像都是方形的。如果我使用background-size: cover，我想做类似的事情。最后我的问题是，如何将图像居中并将其填充到三角形内。

我看到了这个question，但我不确定如何在我的代码中集成它。此外，我的代码到目前为止基于此question

问题

所以对此的任何帮助将不胜感激。我主要关心的是在分类中集中并填充图像。次要问题是在悬停和“翻转”三角形时会显示一些文字。

代码

HTML

<svg id="svg-1" class="clip-svg">
    <image id="img-1" class='svg-image' width="300" height="300" xlink:href="img/tshirt.jpg" />
    <rect class='svg-describe' width="300" height="300" fill="#cccccc" />        
</svg>


<svg id="svg-defs">
    <defs>
        <clipPath id="clip-triangle">
            <polygon points="0, 200 100, 0 200, 200"/>
        </clipPath>
    </defs>
</svg>

CSS

.svg-describe, .svg-image {
    clip-path: url(#clip-triangle);
}

.svg-describe {
    opacity: 0;
    transition: all 0.5s ease 0.2s;
    -moz-transition: all 0.5s ease 0.2s;
    -webkit-transition: all 0.5s ease 0.2s;
}

.clip-svg .svg-describe:hover {
    opacity: 1;
}

jsfiddle

编辑...

通过在我的图片标记中添加x="-50" y="-40"，我能够将图像置于三角形中心。虽然图像没有完全填满三角形。我确信有更好的方法来实现这一目标......

Answer 1

如果对三角形和背景图像使用合适的尺寸，那么我认为这个问题就会消失。

数学非常简单 - 如果你的图像都是300×300像素的正方形，那么你的等边三角形应该是300像素宽和260像素高（因为300×（√3）/ 2 = 260）。

这意味着SVG尺寸应为300×260像素，嵌入图像应垂直偏移20像素，以使其居中。

<svg id="svg-1" class="clip-svg" width="300" height="260">
  <image id="img-1" class="svg-image" width="300" height="300"
         x="0" y="-20" xlink:href="http://goo.gl/l477XT" />
  <rect class="svg-describe" width="300" height="260" fill="#000" />
  <defs>
    <clipPath id="clip-triangle">
      <polygon points="0, 260 150, 0 300, 260" />
    </clipPath>
  </defs>
</svg>

Here's a JSFiddle

具有居中图像的SVG三角形

信息

问题

代码

编辑...

1 个答案: