CODEWITHSUNDEEP
javascripthtmlcsssvg
pourmesomecode
pourmesomecode

Reputation: 4318

Am I handling SVG's correctly?

I have a square div with two triangles drawn via SVGs within that looks like this :

enter image description here

I then have a button that once the onClick event is triggered it will add a class called hidden just basically has : display: none; visibility: hidden; to hide the bottom triangle, then displays two more triangles like so :

enter image description here

My current code looks like : SVG to draw my triangle.

<svg id="triangle" width="100%" height="100%">
        <path d="M0,0 L680,0 L0,680 Z " id="top_triangle" class="o-top_main"></path>
    </svg>

Then the image for me to be able to use a background image :

   <svg style="position: absolute;">
      <defs>
        <pattern id="image_top" width="1" height="1" viewBox="0 0 100 100">
          <image id="svg_img_top" xlink:href='http://41.media.tumblr.com/tumblr_m8r9k312PE1qc6mk8o1_500.jpg' width="100" height="100" preserveAspectRatio="none"></image>
        </pattern>
      </defs>
    </svg>

I've been drawing the SVG path like such <path d="M0,0 L680,0 L0,680 Z ". I've tried drawing an SVG triangle in photoshop, exporting out as an SVG then getting the path in the code and pasting in but the dimensions are never correct so I end up editing the path to the point where i've redrawn it anyway.

Is there anyway way I can draw an SVG triangle in Photoshop where I can then paste the path into my site without needing to change the path to the point where i've redrawn it?

My end site kind of looks similar to this :

enter image description here

Upvotes: 2

Views: 488

Answers (1)

Persijn
Persijn

Reputation: 14990

Lets take a look at your first image here:

Now usually you allways want to create an viewBox on any svg element.
Width and height are usually set in css, but there are lots of cases where setting it in inline is better.

Now lets see your drawing 2 triangles with paths so and then adding another:

My suggestion is drawing 3 triangles then changing the color:
Update: now with image url instead of colors. (the svg is getting quite complicated now)

var bottom = document.getElementById("tri_tri");

bottom.addEventListener("click", function() {
  this.style.fill = "yellow";
  this.style.stroke = "yellow";
});
/**/

.triangleArt {
  width: 250px;
}
#tri_one {
  fill: firebrick;
}
#tri_two {
  fill: url(#image_top);
  stroke: url(#image_top);
}
#tri_tri {
  fill: url(#image_top);
  stroke: url(#image_top);
  cursor: pointer;
}
<svg viewBox="0 0 100 100" class="triangleArt" xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink">
  <defs>
    <pattern id="image_top" patternUnits="userSpaceOnUse" width="250" height="156">
      <image id="svg_img_top" xlink:href='http://41.media.tumblr.com/tumblr_m8r9k312PE1qc6mk8o1_500.jpg' x="0" y="0" width="250" height="156"></image>
    </pattern>
  </defs>
  <path id="tri_one" d="m0,100 100,-100, -100,0z" />
  <path id="tri_two" d="m100,0 0,100 -50,-50z" />
  <path id="tri_tri" d="m100,100 -50,-50 -50,50z" />
</svg>

Upvotes: 3

Related Questions