带有居中图像的 SVG 三角形答案

【问题标题】：SVG triangle with centered image带有居中图像的 SVG 三角形
【发布时间】：2013-12-02 06:12:53
【问题描述】：

我是 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" 添加到我的图像标签中，我能够将图像居中在三角形内。虽然图像没有完全填满三角形。不过，我确信有更好的方法来实现这一点......

【问题讨论】：

标签： html css svg

【解决方案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

【讨论】：