svg 및 d3의 텍스트 테두리

텍스트 테두리를 구현하려고하지만 예상 한 결과가 아닙니다. 확대 및 축소 할 때 텍스트 테두리가 일정하게 유지되도록하는 방법이 있습니까? 예를 들어,이 jsfiddle에서 확대/축소하면 파란색의 그림자가 남고 흰색 스트로크는 배경이 흰색 임에도 눈에.니다. http://jsfiddle.net/F3PhZ/1/svg 및 d3의 텍스트 테두리

과 관련 코드 :

canvas.append("text") 
     .text("Jennifer Lawrence") 
     .attr("font-family", "Arial") 
     .attr("font-weight", "bold") 
     .attr("font-size", "16px") 
     .attr("x", 100) 
     .attr("y", 100) 
     .attr("fill", "blue") 
     .attr("stroke", "white") 
     .attr("stroke-width", ".2px");

내가 떨어져 기반으로 원하는 효과 : 다른 색상의 선이 겹치는 텍스트가있는 경우 있도록 http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html 다음

는 jsfiddle입니다 흰색 테두리 때문에 선이 더 두드러지고 겹치지 않는 텍스트는 정상적으로 보입니다.

감사합니다.

출처

2013-07-17 user1698555

.attr ("vector-effect", "non-scaling-stroke")을 사용할 수 있습니다. Opera 및 Webkit에서 작동하며 최근 Firefox에서 텍스트에 대해 올바르게 작동하도록 수정되었습니다. Firefox가 필요하다고 생각합니다. = "비 확장 스트로크는"그러나 IE에서 지원하지 않는 24

벡터 효과는 그래서 당신은 당신이 확대대로 IE9를 지원하고자한다면 역으로 스트로크 폭을 고정 자바 스크립트에서 뭔가를 코딩해야 할 것 또는 IE10.

출처

2013-07-17 00:41:21

저는 IE를 제외한 다른 모든 브라우저에서 벡터 효과 : 비 스케일링 스트로크가 정상적으로 작동하는 유사한 문제에 직면하고 있습니다. 나는 JS로 이것을 고칠 수 없다는 조건하에있다. CSS를 사용하여 솔루션을 제안 해주십시오. – RAS

나 자신이 질문하는 것이 좋습니다. –

답장을 보내 주셔서 감사합니다. 하지만 나는 다시 같은 질문을 할 수 없다. 제 문제는 같습니다. path 요소에'vector-effect : non-scaling-stroke'를 적용했는데 IE에서는 작동하지 않습니다. 경로 요소의 스트로크 너비가 훨씬 두껍습니다. – RAS

svg 및 d3의 텍스트 테두리

답변

관련 문제