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

回答

相關問題