我正确处理SVG吗？

Question

我有一个正方形div，其中有两个通过SVG绘制的三角形，如下所示：

然后我有一个按钮，一旦onClick事件被触发，它将添加一个名为hidden的类，基本上有：display: none; visibility: hidden;隐藏底部三角形，然后显示另外两个三角形像这样：

我目前的代码如下： SVG绘制我的三角形。

<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>

然后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>

我一直在绘制类似path的SVG <path d="M0,0 L680,0 L0,680 Z "。我已经尝试在photoshop中绘制一个SVG三角形，导出为SVG，然后在代码中获取路径并粘贴但尺寸永远不正确所以我最终编辑路径到我重新绘制它的点。

我是否可以在Photoshop中绘制一个SVG三角形，然后我可以将路径粘贴到我的网站中，而无需将path更改为我重绘它的位置？

我的终端网站看起来与此相似：

Answer 1

让我们看一下你的第一张图片：

    

现在通常你总是希望在任何svg元素上创建一个viewBox 宽度和高度通常在css中设置，但在很多情况下，将其设置为内联更好。

现在让我们看看你的绘图2三角形与路径，然后添加另一个：

我的建议是绘制3个三角形，然后改变颜色：
的更新 现在使用图像网址而不是颜色。 （现在svg变得相当复杂）

＆＃13;

＆＃13;

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

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

＆＃13;

/**/

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;