中风左右侧rect svg [英] Stroke left and right side of rect svg

问题描述

我使用d3在svg中绘制了一个矩形，并且只想左右两边。

 < rect class =extentx =578width =356height =250
 style =cursor：move; opacity：0.2; fill：＃FF9000; >< / rect> 
  

解决方案

这是另一个黑客，但你可以添加一个过滤器你的形状和剪辑的顶部和底部由你的strokewidth - 这里我假设是1单位。

 < defs> 
< filter id =clippyx =0y =1height =248width =356> 
< feColorMatrix type =identity/> 
< / filter> 
< / defs> 
< rect filter =url（#clippy）class =extentwidth =356height =250
 style =cursor：move; opacity：0.2; fill：＃FF9000 ; x =578>< / rect> 
   
 
 
 
 更新：
 
 
 
这里是Christopher Chiche创建的答案的d3.js版本（见下面的原文）：
  svg.append（defs）。append（filter）
 .attr（id，clippy）
 .attr（x，0） 
 .attr（y，1）
 .attr（height，248）
 .attr（width356）
 .append （feColorMatrix）
 .attr（type，identity）
 
 svg.append（rect）
 .attr（filter，url #clippy））
 .attr（class，extent）
 .attr（style，cursor：move; opacity：0.2; fill：＃FF9000）
 .attr（x，578）
 .attr（height，250）
 .attr（width356）
  
 
I have drawn a rect in svg using d3 and would like to stroke only the left and right side.
<rect class="extent" x="578" width="356" height="250"
      style="cursor: move; opacity: 0.2; fill: #FF9000;" ></rect>

解决方案
It's another hack, but you can add a filter to your shape and clip the top and bottom by your strokewidth - which here I'm assuming is 1 unit.
<defs>
   <filter id="clippy" x="0" y="1" height="248" width="356">
     <feColorMatrix type="identity"/>
   </filter>
</defs>
<rect filter="url(#clippy)" class="extent" width="356" height="250"
      style="cursor: move;opacity: 0.2; fill: #FF9000;" x="578"></rect>
Update:

Here is the d3.js version of the answer created by Christopher Chiche (see original lower down):
svg.append("defs").append("filter")
    .attr("id", "clippy")
    .attr("x", "0")
    .attr("y", "1")
    .attr("height", "248")
    .attr("width" "356")
    .append("feColorMatrix")
    .attr("type", "identity")

svg.append("rect")
    .attr("filter", "url(#clippy)")
    .attr("class", "extent") 
    .attr("style", "cursor:move; opacity:0.2; fill: #FF9000")
    .attr("x", "578")
    .attr("height", "250")
    .attr("width" "356")


                        
这篇关于中风左右侧rect svg的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！