SVG triangle with centered image - html

Question

I am a beginner when it comes to SVG creation and have been researching this for quite a while. I've found some good resources, but I am still a bit hazy on the best way to accomplish what I am trying to do (and maybe SVG isn't the right answer - maybe jQuery or CSS3 is better).
Info
I want to have a series of equilateral SVG triangles, I plan on using them as an image thumbnails for a gallery. When you hover over them it will give you a "title" and then you can click to see the entire project (still working on getting a title to show up on hover too).
Some images will be upright, others will be inverted (upside down) - although I haven't figured out how to do this yet either.
Anyway, I have a fiddle with the triangle, image, and hover effect. All the images that will be placed within the triangles will be square. I want to do something similar to if I was using background-size: cover. Ultimately my question is, how do I center the image and fill it within the triangle.
I saw this question but I'm not sure how to integrate this within my code. Also my code thus far is based off of this question
Question
So any help with this would be greatly appreciated. My primary concern is centering and filling the image within the triage. Secondary concerns are getting some text to show up on hover and "flipping" the triangles.
Code
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
edit...
I was able to do a hack to center the image within the triangle by adding x="-50" y="-40" to my image tag. Although the image doesn't fill the triangle completely. I'm sure there is a better way to accomplish this though...

Answer 1

If you use appropriate sizes for the triangles and background images, then I think this problem will go away.
The maths is quite straightforward — if your images are all 300×300 px squares, then your equilateral triangles should be 300 px wide and 260 px tall (because 300×(√3)/2 = 260).
That means the SVG dimensions should be 300×260 px, and the embedded image should be offset vertically by 20 pixels to keep it centred.
<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