eyechart的SVG字母R

伙计们，让我开始说StackOverflow在我的项目中为设计一个开源的javascript眼图测试图表提供了宝贵的帮助。谢谢你们。eyechart的SVG字母R

我的问题是如何最好在5高4宽网格中绘制大写字母R，这将在0.1 alpha（因此不允许重叠元素）下工作。

这是我迄今为止的最佳尝试。困难在于弧与对角线之间的会合，这不是直线。

<svg id="Snellen_R" xmlns="http://www.w3.org/2000/svg" version="1.1"  viewBox="0,0,4,5" height="8.73mm" style="margin: 3.49mm;"> 
      <path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" 
      stroke="black" fill="none" stroke-width="1" > 
      </path> 
      <polygon points="1.4,3 2.1,3 2.2,2.99 2.3,2.98 2.35,2.97 2.4,2.96 2.45,2.95 2.5,2.94 4,5 2.8,5" fill="black" /> 
      </svg>

谢谢。

来源

2016-03-09 Dinsdale Trelawney

元素重叠实际上没有问题。只需将不透明度设置应用于整个<svg>元素，而不是为其中的绘图元素设置单独的填充不透明度和笔画不透明度值。

<p> 
 
    <svg viewBox="0,0,4,5" height="100" style="margin: 3.49mm;"> 
 
    <path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" stroke="black" fill="none" stroke-width="1" stroke-opacity="0.1"> 
 
    </path> 
 
    <polygon points="1.32,2.9 2.12,2.9 2.42,2.9 4,5 2.8,5" fill="black" fill-opacity="0.1" /> 
 
    </svg> 
 
    <br/>Opacity applied to <tt>&lt;path&gt;</tt> and <tt>&lt;polygon&gt;</tt> elements</p> 
 

 
<p> 
 
    <svg viewBox="0,0,4,5" height="100" style="margin: 3.49mm; opacity:0.1"> 
 
    <path d="M 0.5 5 V 0.5 H 2 M 2 0.5 C 3.5 0.5 3.5 2.5 2 2.5 H 0.5" stroke="black" fill="none" stroke-width="1"> 
 
    </path> 
 
    <polygon points="1.32,2.9 2.12,2.9 2.42,2.9 4,5 2.8,5" fill="black" /> 
 
    </svg> 
 
    <br/>Opacity applied to <tt>&lt;svg&gt;</tt> element</p>

来源

2016-03-09 11:21:03

是的！这就是答案。需要我对代码进行小修改以分离颜色和不透明度，但这是完美的解决方案。谢谢。 –

Inkscape可能会帮助你。它是一个开源矢量图形编辑器。我已经多次使用它来创建文本图形。如果有任何可以使用Inkscape绘制您的信件，然后查看它生成的代码。您还可以将图形保存为.svg文件，或导出为另一种格式，如.png。这里是链接： https://inkscape.org/en/ 大量的YouTube教程也在那里。祝你好运！

来源

2016-03-09 01:01:02

我正要键入确切的答案，当你的答案进来！伟大的建议，这正是我在这种情况下会做的......将单个字母导出为SVG，然后在文本编辑器中打开它，并从中了解我能做的。 –

eyechart的SVG字母R

回答

相关问题