筆畫質量/抗鋸齒與svg

我正在嘗試使用SVG製作動畫語音泡泡，但我注意到筆畫上的抗鋸齒缺乏清晰度並對其有明顯的污跡。我已經嘗試通過四捨五入來解決這個問題，但這隻會使得污點變得更糟 - 我能做些什麼來獲得硬的1px厚的黑色線條？筆畫質量/抗鋸齒與svg

HTML：

<div id="inset"> 
    <svg id="svg" width="100%" height="100%"></svg> 
</div>

CSS：

body, html { 
    width: 100%; 
    height: 100%; 
    border: 0; 
    padding: 0; 
    margin: 0; 
} 

#inset { 
width: 20%; 
height: 50%; 
position: absolute; 
bottom: 0; 
left: 50%; 
} 

#svg { 
}

javascipt的：

$(function() { 

    var sponsorBubble = function(el, html, cornerRad) { 
     this.html = html, 
     this.width = el.parent().width(), 
     this.x_center = (el.parent().width()/2), 
     this.height = el.parent().height(), 
     this.arrowWidth = (el.parent().width()/4), 
     this.arrowHeight = (el.parent().height()/8), 
     this.cornerRad = cornerRad, 
     this.arrowRad = this.cornerRad/3, 
     this.arrowControlRatio = this.arrowRad * ((this.arrowWidth/2 - (this.arrowRad*2))/(this.arrowHeight - (this.arrowRad*2))); 

     var bubble = s.path(
      "M" + 
      Math.round(this.x_center) 
      + ", " + 
      Math.round(this.height) 
      + ", Q" + 
      Math.round(this.x_center - this.arrowRad) 
      + ", " + 
      Math.round(this.height) 
      + ", " + 
      Math.round(this.x_center - this.arrowRad) 
      + ", " + 
      Math.round(this.height - this.arrowRad) 
      + ", Q" + 
      Math.round(this.x_center - this.arrowRad) 
      + ", " + 
      Math.round(this.height - (this.arrowRad*2)) 
      + ", " + 
      Math.round(this.x_center) 
      + ", " + 
      Math.round(this.height - (this.arrowRad*2)) 
      + ", Q" + 
      Math.round(this.x_center + this.arrowRad) 
      + ", " + 
      Math.round(this.height - (this.arrowRad*2)) 
      + ", " + 
      Math.round(this.x_center + this.arrowRad) 
      + ", " + 
      Math.round(this.height - this.arrowRad) 
      + ", Q" + 
      Math.round(this.x_center + this.arrowRad) 
      + ", " + 
      Math.round(this.height) 
      + ", " + 
      Math.round(this.x_center) 
      + ", " + 
      Math.round(this.height) 
      + ", Z" 
     ); 

     bubble.attr({ 
      stroke: 'black', 
      fill: 'none' 
     }); 

     bubble.animate({ 
      d: 
       "M" + 
       Math.round(this.x_center) 
       + ", " + 
       Math.round(this.height) 
       + ", Q" + 
       Math.round(this.x_center - this.arrowRad + this.arrowControlRatio) 
       + ", " + 
       Math.round(this.height) 
       + ", " + 
       Math.round(this.x_center - this.arrowRad) 
       + ", " + 
       Math.round(this.height - this.arrowRad) 
       + ", L" + 
       Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad) 
       + ", " + 
       Math.round(this.height - this.arrowHeight + this.arrowRad) 
       + ", Q" + 
       Math.round(this.x_center - (this.arrowWidth/2) + this.arrowRad - this.arrowControlRatio) 
       + ", " + 
       Math.round(this.height - this.arrowHeight) 
       + ", " + 
       Math.round(this.x_center - (this.arrowWidth/2)) 
       + ", " + 
       Math.round(this.height - this.arrowHeight) 
       + ", L" + 
       Math.round(this.cornerRad) 
       + ", " + 
       Math.round(this.height - this.arrowHeight) 
       + ", Q" + 
       0 
       + ", " + 
       Math.round(this.height - this.arrowHeight) 
       + ", " + 
       0 
       + ", " + 
       Math.round(this.height - this.arrowHeight - this.cornerRad) 
       + ", L" + 
       0 
       + ", " + 
       Math.round(this.cornerRad) 
       + ", Q" + 
       0 
       + ", " + 
       0 
       + ", " + 
       Math.round(this.cornerRad) 
       + ", " + 
       0 
       + ", L" + 
       Math.round(this.width - this.cornerRad) 
       + ", " + 
       0 
       + ", Q" + 
       Math.round(this.width) 
       + ", " + 
       0 
       + ", " + 
       Math.round(this.width) 
       + ", " + 
       Math.round(this.cornerRad) 
       + ", L" + 
       Math.round(this.width) 
       + ", " + 
       Math.round(this.height - this.arrowHeight - this.cornerRad) 
       + ", Q" + 
       Math.round(this.width) 
       + ", " + 
       Math.round(this.height - this.arrowHeight) 
       + ", " + 
       Math.round(this.width - this.cornerRad) 
       + ", " + 
       Math.round(this.height - this.arrowHeight) 
       + ", L" + 
       Math.round(this.x_center + (this.arrowWidth/2)) 
       + ", " + 
       Math.round(this.height - this.arrowHeight) 
       + ", Q" + 
       Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad + this.arrowControlRatio) 
       + ", " + 
       Math.round(this.height - this.arrowHeight) 
       + ", " + 
       Math.round(this.x_center + (this.arrowWidth/2) - this.arrowRad) 
       + ", " + 
       Math.round(this.height - this.arrowHeight + this.arrowRad) 
       + ", L" + 
       Math.round(this.x_center + this.arrowRad) 
       + ", " + 
       Math.round(this.height - this.arrowRad) 
       + ", Q" + 
       Math.round(this.x_center + this.arrowRad - this.arrowControlRatio) 
       + ", " + 
       Math.round(this.height) 
       + ", " + 
       Math.round(this.x_center) 
       + ", " + 
       Math.round(this.height) 
       + ", Z" 
      }, 
      100 
     ); 

    }; 


s = Snap('#svg'); 

var bubble_obj = new sponsorBubble($('#svg'), "test_content", 15); 
});

jdfiddle： http://jsfiddle.net/L5k48hwm/

來源

2014-09-29 tomc

我想獲得不錯彎曲的角落，你需要做兩件事：

改善你的路徑生成算法。這是因爲當你放大SVG時，你可以看到路徑寬度在拐角處變大。我沒有時間或專業知識來幫助解決這個問題。
嘗試使用shape-rendering CSS property的不同值。他們可以給你顯着更清晰的渲染。

來源

2014-09-29 00:59:01 GregL

我沒有具體提及該彎曲角部，而是整體上缺乏形狀周圍固體跟蹤的。在像素或兩條路徑中有太多的灰色陰影，當我真的只喜歡單個強壯的1px粗線時。我已經嘗試過不同的形狀渲染值，並且他們都沒有真正解決邊緣強度問題。 – tomc 2014-09-29 01:17:03

svg path { // or rect, circle, etc 
    shape-rendering: crispEdges; 
}

說了這麼多，你可以嘗試使用jQuery UI .animate()創建這樣jsfiddle例類似的效果（扭轉這種動畫來匹配您的規格）。這避免了複雜的路徑生成和更平滑的線條。

更新：這是代碼片段。

$('div').append('<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0.00000000" y="0.00000000" width="100%" height="100%" id="svg3" viewbox="0 0 1000 600" > <path fill="#FFFFFF" stroke="#000000" stroke-width="10" d="M916.902,397.331c14.126,0,17.344-9.739,17.344-9.739 c0-27.635,7.992-42.357,26.927-42.357c0,0,13.702,1.668,13.702-14.946c0-0.001,0.619-43.408-1.901-141.244 c-2.514-97.836-9.537-109.333-9.537-109.333c0-14.125-9.129-13.284-9.129-13.284c-24.67,0-53.406,4.151-53.406-30.893 c0,0,1.558-11.866-15.041-11.866c0,0-159.78-14.301-423.823-14.301c-264.041,0-375.12,2.352-375.12,2.352 c-14.125,0-13.284,9.136-13.284,9.136c0,22.479-13.575,42.622-30.319,42.622c0,0-13.705,0.341-13.705,16.949 c0,0-4.551,60.914-4.551,117.724c0,56.808,4.551,126.899,4.551,126.899c0,14.125,9.127,13.28,9.127,13.28 c24.9,0,29.944,10.568,29.944,30.322c0,0,1.038,15.744,25.709,15.744l248.677,5.155c0,0,46.81,25.855,64.76,39.665 c17.952,13.808,27.714,26.235,12.526,41.426c-6.669,6.666-11.966,12.474-9.571,21.187c2.277,8.256,26.797,22.168,29.903,23.746 c0.261,0.127,61.957,30.323,84.796,41.37c16.646,8.047,33.288,16.074,49.292,25.362c2.152,1.253,14.271,9.614,16.804,7.089 c2.484-2.479-11.174-12.959-12.823-14.315c-9.084-7.442-16.206-16.462-24.158-25.027c-12.481-13.465-25.133-26.788-37.746-40.133 c-7.044-7.464-13.884-15.167-21.144-22.43c-1.791-1.79-1.476-4.571,0.699-7.001c7.682-8.531,25.246-28.013,27.384-30.14 c2.739-2.731-1.814-7.121-1.814-7.121l-62.959-51.678L916.902,397.331z"/> </svg>'); 
 

 
$('div').draggable({ 
 
    handle: 'rect' 
 
}); 
 

 
$('div').animate({ 
 
    width: "500px", 
 
    height: "300px", 
 
    top: "0px", 
 
    left: "0px" 
 
}, 2000).animate({ 
 
    width: "100px", 
 
    height: "60px", 
 
    top: "240px", 
 
    left: "230px" 
 
}, 2000);

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> 
 
<div style="width:100px; height:60px; border:solid thin #888; padding:0px; border-radius:4px; background-color:yellow; top:240px; left:230px"> 
 
</div>

來源

2014-09-30 17:58:03

雖然我很欣賞這種努力，但這完全不能回答我的問題。我不是在尋求幫助來製作演講泡泡（有一百萬種方法可以做到這一點），我正在試圖讓我的svg行看起來更清晰（形狀渲染也不能解決這個問題）。 – tomc 2014-10-02 22:58:14

啊，你想要的是一個越來越多的泡泡，但路徑寬度保持相同的厚度（和平滑），因此你的路徑生成算法。在代碼中使用''stroke-width'：'3''，你可以看到它在某些區域變濃。思考... – 2014-10-02 23:26:59

你試過'Snap.path.toCubic（pathString）'函數嗎？路徑生成函數還會在底部產生奇怪的旋轉（慢動作下降到2000毫秒，您會看到它）。 – 2014-10-23 18:29:08

筆畫質量/抗鋸齒與svg

回答

相關問題