在SVG中绘制半透明箭头

huangapple
go评论92阅读模式
英文:

Drawing semitransparent arrows in svg

问题

I have an arrow React component, which draws an arrow over the board with given code. The problem is when I want to draw a semitransparent arrow, it looks ugly, as the area of shapes collision becomes darker.

How I can fix it considering that it's important to make the arrow point exactly on the coordinates given from props?

英文:

I have an arrow React component, which draws an arrow over the board with given code. The problem is when I want to draw a semitransparent arrow, it looks ugly, as the area of shapes coalision becomes darker.

How I can fix it considering that its important to make arrow point exact on the coords given from props?

  1. const Arrow = ({ from, to, customArrowColor }) => (
  2.   <Fragment>
  3.     <defs>
  4.       <marker
  5.         id="arrowhead"
  6.         markerWidth="2"
  7.         markerHeight="2.5"
  8.         refX="1.25"
  9.         refY="1.25"
  10.         orient="auto"
  11.       >
  12.         <polygon
  13.           points="0 0, 2 1.25, 0 2.5"
  14.           style={{ fill: "rgba(28, 195, 42, 0.35)" }}
  15.         />
  16.       </marker>
  17.     </defs>
  18.     <line
  19.       x1={from.x}
  20.       y1={from.y}
  21.       x2={to.x}
  22.       y2={to.y}
  23.       style={{
  24.         stroke: "rgba(28, 195, 42, 0.35)",
  25.       }}
  26.       markerEnd="url(#arrowhead)"
  27.     />
  28.   </Fragment>
  29. );

在SVG中绘制半透明箭头

答案1

得分: 5

You could use opaque colors and change your <line> elements opacity instead:

  1. body {
  2.     margin: 0;
  3.     font-size: 1.5em;
  4.     line-height: 1.3em;
  5.     background-image: url("data:image/svg+xml, %3Csvg viewBox='0 0 10 9' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M0 0 L10 0 L10 9' stroke-width='1' fill='none' stroke='%23eee' /%3E%3C/svg%3E");
  6.     background-repeat: repeat;
  7.     background-size: 10px;
  8. }
  1. <svg viewBox="0 0 100 100">
  2.   <marker id="arrowhead" markerWidth="2" markerHeight="2.5" refX="1.25" refY="1.25" orient="auto">
  3.     <polygon points="0 0, 2 1.25, 0 2.5" fill="rgba(28, 195, 42, 1)" />
  4.   </marker>
  5.   <line x1="0" y1="50" x2="50" y2="50" opacity="0.5" stroke="rgba(28, 195, 42, 1)" stroke-width="5"  style="marker-end:url(#arrowhead)" />
  6. </svg>
英文:

You could use opaque colors and change your &lt;line&gt; elements opacity instead:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

  1. body {
  2.     margin: 0;
  3.     font-size: 1.5em;
  4.     line-height: 1.3em;
  5.     background-image: url(&quot;data:image/svg+xml, %3Csvg viewBox=&#39;0 0 10 9&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39; %3E%3Cpath d=&#39;M0 0 L10 0 L10 9&#39; stroke-width=&#39;1&#39; fill=&#39;none&#39; stroke=&#39;%23eee&#39; /%3E%3C/svg%3E&quot;);
  6.     background-repeat: repeat;
  7.     background-size: 10px;
  8. }

<!-- language: lang-html -->

  1. &lt;svg viewBox=&quot;0 0 100 100&quot;&gt;
  2.   &lt;marker id=&quot;arrowhead&quot; markerWidth=&quot;2&quot; markerHeight=&quot;2.5&quot; refX=&quot;1.25&quot; refY=&quot;1.25&quot; orient=&quot;auto&quot;&gt;
  3.     &lt;polygon points=&quot;0 0, 2 1.25, 0 2.5&quot; fill=&quot;rgba(28, 195, 42, 1)&quot;  /&gt;
  4.   &lt;/marker&gt;
  5.     &lt;line x1=&quot;0&quot; y1=&quot;50&quot; x2=&quot;50&quot; y2=&quot;50&quot; opacity=&quot;0.5&quot; stroke=&quot;rgba(28, 195, 42, 1)&quot; stroke-width=&quot;5&quot;  style=&quot;marker-end:url(#arrowhead)&quot; /&gt;
  6. &lt;/svg&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年6月4日 23:12:31
  • 转载请务必保留本文链接：https://go.coder-hub.com/76401064.html
  • reactjs
  • svg
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定