将文本阴影转换为嵌入式SVG样式的嵌入式阴影

debugcn 发表于 Dev

甲基纤维素

有没有一种方法可以转换CSS文本阴影属性，即

text-shadow: rgb(0, 255, 255) 5.00246px -4.66487px 0px, rgb(255, 0, 255) -5.00246px 4.66487px 0px;

到一个内嵌的svg阴影属性，即

<svg style="filter: drop-shadow(0 5px 5px red);"...

我正在动态生成svg，因此无法使用CSS。

JsFiddle链接：https ://jsfiddle.net/3uwcgstr/4/ 。

仙客来

无需尝试使用阴影，您可以重用具有不同偏移量的路径并填充

<svg viewBox="-5 -5 105 35" width="300">
  <defs><path id="play"  d="M 44.172 25.92 L 25.848 25.92 A 2.415 2.415 0 0 1 25.493 25.896 Q 25.313 25.869 25.17 25.813 A 0.902 0.902 0 0 1 24.858 25.614 A 0.91 0.91 0 0 1 24.654 25.289 Q 24.6 25.146 24.575 24.967 A 2.436 2.436 0 0 1 24.552 24.624 L 24.552 1.296 A 2.415 2.415 0 0 1 24.576 0.941 Q 24.603 0.761 24.66 0.618 A 0.902 0.902 0 0 1 24.858 0.306 A 0.91 0.91 0 0 1 25.184 0.102 Q 25.326 0.048 25.505 0.023 A 2.436 2.436 0 0 1 25.848 0 L 31.428 0 A 2.415 2.415 0 0 1 31.783 0.024 Q 31.963 0.051 32.106 0.108 A 0.902 0.902 0 0 1 32.418 0.306 A 0.91 0.91 0 0 1 32.622 0.632 Q 32.676 0.775 32.702 0.953 A 2.436 2.436 0 0 1 32.724 1.296 L 32.724 19.116 L 37.656 19.116 L 37.656 13.284 A 2.415 2.415 0 0 1 37.68 12.929 Q 37.707 12.749 37.764 12.606 A 0.902 0.902 0 0 1 37.962 12.294 A 0.91 0.91 0 0 1 38.288 12.09 Q 38.43 12.036 38.609 12.011 A 2.436 2.436 0 0 1 38.952 11.988 L 44.172 11.988 A 2.415 2.415 0 0 1 44.527 12.012 Q 44.707 12.039 44.85 12.096 A 0.902 0.902 0 0 1 45.162 12.294 A 0.91 0.91 0 0 1 45.366 12.62 Q 45.42 12.763 45.446 12.941 A 2.436 2.436 0 0 1 45.468 13.284 L 45.468 24.624 A 2.415 2.415 0 0 1 45.444 24.979 Q 45.417 25.159 45.36 25.302 A 0.902 0.902 0 0 1 45.162 25.614 A 0.91 0.91 0 0 1 44.837 25.818 Q 44.694 25.872 44.515 25.898 A 2.436 2.436 0 0 1 44.172 25.92 Z M 88.092 25.92 L 82.26 25.92 A 2.415 2.415 0 0 1 81.905 25.896 Q 81.725 25.869 81.582 25.813 A 0.902 0.902 0 0 1 81.27 25.614 A 0.91 0.91 0 0 1 81.066 25.289 Q 81.012 25.146 80.987 24.967 A 2.436 2.436 0 0 1 80.964 24.624 L 80.964 20.016 L 75.456 12.636 Q 74.63 11.523 74.36 10.697 A 3.39 3.39 0 0 1 74.358 10.692 Q 74.088 9.864 74.088 8.208 L 74.088 1.296 A 2.415 2.415 0 0 1 74.112 0.941 Q 74.139 0.761 74.196 0.618 A 0.902 0.902 0 0 1 74.394 0.306 A 0.91 0.91 0 0 1 74.72 0.102 Q 74.862 0.048 75.041 0.023 A 2.436 2.436 0 0 1 75.384 0 L 80.928 0 A 2.415 2.415 0 0 1 81.283 0.024 Q 81.463 0.051 81.606 0.108 A 0.902 0.902 0 0 1 81.918 0.306 A 0.91 0.91 0 0 1 82.122 0.632 Q 82.176 0.775 82.202 0.953 A 2.436 2.436 0 0 1 82.224 1.296 L 82.224 7.2 A 8.037 8.037 0 0 0 82.243 7.748 A 9.329 9.329 0 0 0 82.26 7.956 A 1.502 1.502 0 0 0 82.461 8.576 A 1.845 1.845 0 0 0 82.548 8.712 L 84.204 11.304 A 2.179 2.179 0 0 0 84.324 11.497 Q 84.449 11.675 84.582 11.772 A 0.742 0.742 0 0 0 84.897 11.902 A 1.003 1.003 0 0 0 85.068 11.916 L 85.428 11.916 A 0.955 0.955 0 0 0 85.661 11.889 A 0.726 0.726 0 0 0 85.914 11.772 A 0.959 0.959 0 0 0 86.06 11.639 Q 86.18 11.507 86.292 11.304 L 87.948 8.712 A 1.673 1.673 0 0 0 88.163 8.296 A 1.446 1.446 0 0 0 88.236 7.956 A 8.721 8.721 0 0 0 88.269 7.406 A 7.51 7.51 0 0 0 88.272 7.2 L 88.272 1.296 A 2.415 2.415 0 0 1 88.296 0.941 Q 88.323 0.761 88.38 0.618 A 0.902 0.902 0 0 1 88.578 0.306 A 0.91 0.91 0 0 1 88.904 0.102 Q 89.046 0.048 89.225 0.023 A 2.436 2.436 0 0 1 89.568 0 L 94.932 0 A 2.415 2.415 0 0 1 95.287 0.024 Q 95.467 0.051 95.61 0.108 A 0.902 0.902 0 0 1 95.922 0.306 A 0.91 0.91 0 0 1 96.126 0.632 Q 96.18 0.775 96.206 0.953 A 2.436 2.436 0 0 1 96.228 1.296 L 96.228 8.208 A 15.3 15.3 0 0 1 96.205 9.074 Q 96.147 10.097 95.94 10.692 Q 95.747 11.249 95.326 11.935 A 12.614 12.614 0 0 1 94.86 12.636 L 89.388 20.052 L 89.388 24.624 A 2.415 2.415 0 0 1 89.364 24.979 Q 89.337 25.159 89.28 25.302 A 0.902 0.902 0 0 1 89.082 25.614 A 0.91 0.91 0 0 1 88.757 25.818 Q 88.614 25.872 88.435 25.898 A 2.436 2.436 0 0 1 88.092 25.92 Z M 56.916 19.584 L 56.916 24.624 A 2.415 2.415 0 0 1 56.892 24.979 Q 56.865 25.159 56.808 25.302 A 0.902 0.902 0 0 1 56.61 25.614 A 0.91 0.91 0 0 1 56.285 25.818 Q 56.142 25.872 55.963 25.898 A 2.436 2.436 0 0 1 55.62 25.92 L 50.328 25.92 A 2.415 2.415 0 0 1 49.973 25.896 Q 49.793 25.869 49.65 25.813 A 0.902 0.902 0 0 1 49.338 25.614 A 0.91 0.91 0 0 1 49.134 25.289 Q 49.08 25.146 49.055 24.967 A 2.436 2.436 0 0 1 49.032 24.624 L 49.032 15.12 A 8.305 8.305 0 0 1 49.097 14.113 Q 49.161 13.598 49.284 13.026 A 15.413 15.413 0 0 1 49.374 12.636 Q 49.636 11.561 50.119 10.212 A 39.308 39.308 0 0 1 50.436 9.36 L 53.568 1.188 A 2.105 2.105 0 0 1 53.777 0.752 A 1.503 1.503 0 0 1 54.234 0.288 A 1.7 1.7 0 0 1 54.733 0.077 Q 55.033 0 55.404 0 L 65.088 0 Q 65.679 0 66.095 0.215 A 1.579 1.579 0 0 1 66.222 0.288 A 1.516 1.516 0 0 1 66.703 0.79 A 2.143 2.143 0 0 1 66.888 1.188 L 70.02 9.36 A 36.906 36.906 0 0 1 70.507 10.698 Q 70.733 11.361 70.901 11.952 A 18.538 18.538 0 0 1 71.082 12.636 A 13.786 13.786 0 0 1 71.303 13.723 Q 71.39 14.266 71.415 14.75 A 7.354 7.354 0 0 1 71.424 15.12 L 71.424 24.624 A 2.415 2.415 0 0 1 71.4 24.979 Q 71.373 25.159 71.316 25.302 A 0.902 0.902 0 0 1 71.118 25.614 A 0.91 0.91 0 0 1 70.793 25.818 Q 70.65 25.872 70.471 25.898 A 2.436 2.436 0 0 1 70.128 25.92 L 64.692 25.92 A 2.691 2.691 0 0 1 64.307 25.895 Q 63.873 25.832 63.63 25.614 A 0.921 0.921 0 0 1 63.385 25.244 Q 63.327 25.092 63.304 24.902 A 2.286 2.286 0 0 1 63.288 24.624 L 63.288 19.584 L 56.916 19.584 Z M 6.876 25.92 L 1.296 25.92 A 2.415 2.415 0 0 1 0.941 25.896 Q 0.761 25.869 0.618 25.813 A 0.902 0.902 0 0 1 0.306 25.614 A 0.91 0.91 0 0 1 0.102 25.289 Q 0.048 25.146 0.023 24.967 A 2.436 2.436 0 0 1 0 24.624 L 0 1.296 A 2.415 2.415 0 0 1 0.024 0.941 Q 0.051 0.761 0.108 0.618 A 0.902 0.902 0 0 1 0.306 0.306 A 0.91 0.91 0 0 1 0.632 0.102 Q 0.774 0.048 0.953 0.023 A 2.436 2.436 0 0 1 1.296 0 L 12.312 0 Q 16.36 0 18.292 1.329 A 4.268 4.268 0 0 1 19.008 1.944 A 6.637 6.637 0 0 1 20.666 5.352 A 9.361 9.361 0 0 1 20.808 7.02 L 20.808 11.628 A 8.871 8.871 0 0 1 20.533 13.894 A 6.507 6.507 0 0 1 19.008 16.704 A 4.884 4.884 0 0 1 17.314 17.85 Q 15.777 18.508 13.375 18.624 A 22.133 22.133 0 0 1 12.312 18.648 L 8.172 18.648 L 8.172 24.624 A 2.415 2.415 0 0 1 8.148 24.979 Q 8.121 25.159 8.064 25.302 A 0.902 0.902 0 0 1 7.866 25.614 A 0.91 0.91 0 0 1 7.541 25.818 Q 7.398 25.872 7.219 25.898 A 2.436 2.436 0 0 1 6.876 25.92 Z M 58.968 7.56 L 57.276 13.032 L 62.928 13.032 L 61.236 7.56 Q 61.092 7.236 60.93 7.092 Q 60.768 6.948 60.552 6.948 L 59.652 6.948 Q 59.436 6.948 59.274 7.092 A 0.832 0.832 0 0 0 59.165 7.212 Q 59.066 7.343 58.974 7.547 A 2.778 2.778 0 0 0 58.968 7.56 Z M 11.34 6.732 L 8.1 6.732 L 8.1 12.168 L 11.34 12.168 Q 12.281 12.168 12.637 11.73 A 0.874 0.874 0 0 0 12.708 11.628 A 2.289 2.289 0 0 0 13.027 10.573 A 2.78 2.78 0 0 0 13.032 10.404 L 13.032 8.496 A 2.471 2.471 0 0 0 12.915 7.725 A 2.211 2.211 0 0 0 12.708 7.272 A 0.959 0.959 0 0 0 12.267 6.894 Q 11.933 6.742 11.411 6.733 A 3.896 3.896 0 0 0 11.34 6.732 Z" vector-effect="non-scaling-stroke"></path></defs>
  <g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt"    >
   <use xlink:href="#play" fill="rgb(0, 255, 255)" x="-1.5"/>
   <use xlink:href="#play" fill="rgb(255, 67, 255)" y="-1.5"/>
   <use xlink:href="#play" fill="rgb(120, 67, 230)"/>  
  </g>   
  </svg>

更新

如果您喜欢使用阴影，这就是我的方法：

svg{filter:drop-shadow(5.00246px -4.66487px 0px rgb(0, 255, 255))  drop-shadow(-5.00246px 4.66487px 0px rgb(255, 0, 255) );

<svg viewBox="-5 -5 105 35" width="300" >
 <g id="svgGroup"  fill="rgb(120, 67, 230)" stroke-linecap="round" fill-rule="evenodd" ><path id="play"  d="M 44.172 25.92 L 25.848 25.92 A 2.415 2.415 0 0 1 25.493 25.896 Q 25.313 25.869 25.17 25.813 A 0.902 0.902 0 0 1 24.858 25.614 A 0.91 0.91 0 0 1 24.654 25.289 Q 24.6 25.146 24.575 24.967 A 2.436 2.436 0 0 1 24.552 24.624 L 24.552 1.296 A 2.415 2.415 0 0 1 24.576 0.941 Q 24.603 0.761 24.66 0.618 A 0.902 0.902 0 0 1 24.858 0.306 A 0.91 0.91 0 0 1 25.184 0.102 Q 25.326 0.048 25.505 0.023 A 2.436 2.436 0 0 1 25.848 0 L 31.428 0 A 2.415 2.415 0 0 1 31.783 0.024 Q 31.963 0.051 32.106 0.108 A 0.902 0.902 0 0 1 32.418 0.306 A 0.91 0.91 0 0 1 32.622 0.632 Q 32.676 0.775 32.702 0.953 A 2.436 2.436 0 0 1 32.724 1.296 L 32.724 19.116 L 37.656 19.116 L 37.656 13.284 A 2.415 2.415 0 0 1 37.68 12.929 Q 37.707 12.749 37.764 12.606 A 0.902 0.902 0 0 1 37.962 12.294 A 0.91 0.91 0 0 1 38.288 12.09 Q 38.43 12.036 38.609 12.011 A 2.436 2.436 0 0 1 38.952 11.988 L 44.172 11.988 A 2.415 2.415 0 0 1 44.527 12.012 Q 44.707 12.039 44.85 12.096 A 0.902 0.902 0 0 1 45.162 12.294 A 0.91 0.91 0 0 1 45.366 12.62 Q 45.42 12.763 45.446 12.941 A 2.436 2.436 0 0 1 45.468 13.284 L 45.468 24.624 A 2.415 2.415 0 0 1 45.444 24.979 Q 45.417 25.159 45.36 25.302 A 0.902 0.902 0 0 1 45.162 25.614 A 0.91 0.91 0 0 1 44.837 25.818 Q 44.694 25.872 44.515 25.898 A 2.436 2.436 0 0 1 44.172 25.92 Z M 88.092 25.92 L 82.26 25.92 A 2.415 2.415 0 0 1 81.905 25.896 Q 81.725 25.869 81.582 25.813 A 0.902 0.902 0 0 1 81.27 25.614 A 0.91 0.91 0 0 1 81.066 25.289 Q 81.012 25.146 80.987 24.967 A 2.436 2.436 0 0 1 80.964 24.624 L 80.964 20.016 L 75.456 12.636 Q 74.63 11.523 74.36 10.697 A 3.39 3.39 0 0 1 74.358 10.692 Q 74.088 9.864 74.088 8.208 L 74.088 1.296 A 2.415 2.415 0 0 1 74.112 0.941 Q 74.139 0.761 74.196 0.618 A 0.902 0.902 0 0 1 74.394 0.306 A 0.91 0.91 0 0 1 74.72 0.102 Q 74.862 0.048 75.041 0.023 A 2.436 2.436 0 0 1 75.384 0 L 80.928 0 A 2.415 2.415 0 0 1 81.283 0.024 Q 81.463 0.051 81.606 0.108 A 0.902 0.902 0 0 1 81.918 0.306 A 0.91 0.91 0 0 1 82.122 0.632 Q 82.176 0.775 82.202 0.953 A 2.436 2.436 0 0 1 82.224 1.296 L 82.224 7.2 A 8.037 8.037 0 0 0 82.243 7.748 A 9.329 9.329 0 0 0 82.26 7.956 A 1.502 1.502 0 0 0 82.461 8.576 A 1.845 1.845 0 0 0 82.548 8.712 L 84.204 11.304 A 2.179 2.179 0 0 0 84.324 11.497 Q 84.449 11.675 84.582 11.772 A 0.742 0.742 0 0 0 84.897 11.902 A 1.003 1.003 0 0 0 85.068 11.916 L 85.428 11.916 A 0.955 0.955 0 0 0 85.661 11.889 A 0.726 0.726 0 0 0 85.914 11.772 A 0.959 0.959 0 0 0 86.06 11.639 Q 86.18 11.507 86.292 11.304 L 87.948 8.712 A 1.673 1.673 0 0 0 88.163 8.296 A 1.446 1.446 0 0 0 88.236 7.956 A 8.721 8.721 0 0 0 88.269 7.406 A 7.51 7.51 0 0 0 88.272 7.2 L 88.272 1.296 A 2.415 2.415 0 0 1 88.296 0.941 Q 88.323 0.761 88.38 0.618 A 0.902 0.902 0 0 1 88.578 0.306 A 0.91 0.91 0 0 1 88.904 0.102 Q 89.046 0.048 89.225 0.023 A 2.436 2.436 0 0 1 89.568 0 L 94.932 0 A 2.415 2.415 0 0 1 95.287 0.024 Q 95.467 0.051 95.61 0.108 A 0.902 0.902 0 0 1 95.922 0.306 A 0.91 0.91 0 0 1 96.126 0.632 Q 96.18 0.775 96.206 0.953 A 2.436 2.436 0 0 1 96.228 1.296 L 96.228 8.208 A 15.3 15.3 0 0 1 96.205 9.074 Q 96.147 10.097 95.94 10.692 Q 95.747 11.249 95.326 11.935 A 12.614 12.614 0 0 1 94.86 12.636 L 89.388 20.052 L 89.388 24.624 A 2.415 2.415 0 0 1 89.364 24.979 Q 89.337 25.159 89.28 25.302 A 0.902 0.902 0 0 1 89.082 25.614 A 0.91 0.91 0 0 1 88.757 25.818 Q 88.614 25.872 88.435 25.898 A 2.436 2.436 0 0 1 88.092 25.92 Z M 56.916 19.584 L 56.916 24.624 A 2.415 2.415 0 0 1 56.892 24.979 Q 56.865 25.159 56.808 25.302 A 0.902 0.902 0 0 1 56.61 25.614 A 0.91 0.91 0 0 1 56.285 25.818 Q 56.142 25.872 55.963 25.898 A 2.436 2.436 0 0 1 55.62 25.92 L 50.328 25.92 A 2.415 2.415 0 0 1 49.973 25.896 Q 49.793 25.869 49.65 25.813 A 0.902 0.902 0 0 1 49.338 25.614 A 0.91 0.91 0 0 1 49.134 25.289 Q 49.08 25.146 49.055 24.967 A 2.436 2.436 0 0 1 49.032 24.624 L 49.032 15.12 A 8.305 8.305 0 0 1 49.097 14.113 Q 49.161 13.598 49.284 13.026 A 15.413 15.413 0 0 1 49.374 12.636 Q 49.636 11.561 50.119 10.212 A 39.308 39.308 0 0 1 50.436 9.36 L 53.568 1.188 A 2.105 2.105 0 0 1 53.777 0.752 A 1.503 1.503 0 0 1 54.234 0.288 A 1.7 1.7 0 0 1 54.733 0.077 Q 55.033 0 55.404 0 L 65.088 0 Q 65.679 0 66.095 0.215 A 1.579 1.579 0 0 1 66.222 0.288 A 1.516 1.516 0 0 1 66.703 0.79 A 2.143 2.143 0 0 1 66.888 1.188 L 70.02 9.36 A 36.906 36.906 0 0 1 70.507 10.698 Q 70.733 11.361 70.901 11.952 A 18.538 18.538 0 0 1 71.082 12.636 A 13.786 13.786 0 0 1 71.303 13.723 Q 71.39 14.266 71.415 14.75 A 7.354 7.354 0 0 1 71.424 15.12 L 71.424 24.624 A 2.415 2.415 0 0 1 71.4 24.979 Q 71.373 25.159 71.316 25.302 A 0.902 0.902 0 0 1 71.118 25.614 A 0.91 0.91 0 0 1 70.793 25.818 Q 70.65 25.872 70.471 25.898 A 2.436 2.436 0 0 1 70.128 25.92 L 64.692 25.92 A 2.691 2.691 0 0 1 64.307 25.895 Q 63.873 25.832 63.63 25.614 A 0.921 0.921 0 0 1 63.385 25.244 Q 63.327 25.092 63.304 24.902 A 2.286 2.286 0 0 1 63.288 24.624 L 63.288 19.584 L 56.916 19.584 Z M 6.876 25.92 L 1.296 25.92 A 2.415 2.415 0 0 1 0.941 25.896 Q 0.761 25.869 0.618 25.813 A 0.902 0.902 0 0 1 0.306 25.614 A 0.91 0.91 0 0 1 0.102 25.289 Q 0.048 25.146 0.023 24.967 A 2.436 2.436 0 0 1 0 24.624 L 0 1.296 A 2.415 2.415 0 0 1 0.024 0.941 Q 0.051 0.761 0.108 0.618 A 0.902 0.902 0 0 1 0.306 0.306 A 0.91 0.91 0 0 1 0.632 0.102 Q 0.774 0.048 0.953 0.023 A 2.436 2.436 0 0 1 1.296 0 L 12.312 0 Q 16.36 0 18.292 1.329 A 4.268 4.268 0 0 1 19.008 1.944 A 6.637 6.637 0 0 1 20.666 5.352 A 9.361 9.361 0 0 1 20.808 7.02 L 20.808 11.628 A 8.871 8.871 0 0 1 20.533 13.894 A 6.507 6.507 0 0 1 19.008 16.704 A 4.884 4.884 0 0 1 17.314 17.85 Q 15.777 18.508 13.375 18.624 A 22.133 22.133 0 0 1 12.312 18.648 L 8.172 18.648 L 8.172 24.624 A 2.415 2.415 0 0 1 8.148 24.979 Q 8.121 25.159 8.064 25.302 A 0.902 0.902 0 0 1 7.866 25.614 A 0.91 0.91 0 0 1 7.541 25.818 Q 7.398 25.872 7.219 25.898 A 2.436 2.436 0 0 1 6.876 25.92 Z M 58.968 7.56 L 57.276 13.032 L 62.928 13.032 L 61.236 7.56 Q 61.092 7.236 60.93 7.092 Q 60.768 6.948 60.552 6.948 L 59.652 6.948 Q 59.436 6.948 59.274 7.092 A 0.832 0.832 0 0 0 59.165 7.212 Q 59.066 7.343 58.974 7.547 A 2.778 2.778 0 0 0 58.968 7.56 Z M 11.34 6.732 L 8.1 6.732 L 8.1 12.168 L 11.34 12.168 Q 12.281 12.168 12.637 11.73 A 0.874 0.874 0 0 0 12.708 11.628 A 2.289 2.289 0 0 0 13.027 10.573 A 2.78 2.78 0 0 0 13.032 10.404 L 13.032 8.496 A 2.471 2.471 0 0 0 12.915 7.725 A 2.211 2.211 0 0 0 12.708 7.272 A 0.959 0.959 0 0 0 12.267 6.894 Q 11.933 6.742 11.411 6.733 A 3.896 3.896 0 0 0 11.34 6.732 Z" vector-effect="non-scaling-stroke"></path> 
  </g>   
  </svg>

当然，您可以将过滤器用作内联样式。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。