小编Ale*_*_TT的帖子
模拟外部笔划::伪元素之前：透明文本问题
我很难相信，没有使用CSS的标准，简单（且与浏览器无关）的方法来在文本外部放置笔触效果。
我们确实有，-webkit-text-stroke但是由于某些奇怪的原因，笔画围绕文本的边界居中，而不是在文本的边界之外（如此处所哀叹）。
因此，我试图基于此想法实现一种变通方法，该方法是将描边的文本放置在原始未描边的文本后面的伪元素中。我已经在jsfiddle中用以下代码演示了这一点：
var jQueryAttr = function(selector, attr, setterFunction) {
document.querySelectorAll(selector).forEach((el, i) => {
el.setAttribute(attr, setterFunction.call(el, i, attr));
});
};
jQueryAttr('.myclass', 'data-myclass', function(index, attr) {
return this.innerHTML;
});body {
background: none;
}
.basic {
color: rgba(186, 218, 85, 1);
font: 2.5em Georgia, serif;
}
.myclass {
position: relative;
background: transparent;
z-index: 0;
}
.myclass::before {
content: attr(data-myclass);
position: …19
推荐指数
推荐指数
2
解决办法
解决办法
370
查看次数
查看次数
如何在SVG路径中居中文本
我需要一些帮助,当我使用svg绘制一个循环并放置一些文本时,如何在SVG路径中居中文本
<svg height="500"width="500">
<path d="M250 250 L250 0 A250,250,0,0,1,250,0 L250 250 Z"fill="#fff"stroke="#fff"></path>
<defs>
<path id="p0"d="M250 50 A200,200,0,0,1,250,50 Z"fill="#fff"stroke="#fff"></path>
</defs>
<text style="font-size: 24px;"x="0"text-anchor="center">
<textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p0">0test text</textPath>
</text>
<path d="M250 250 L250 0 A250,250,0,0,1,466.50635094610965,124.99999999999997 L250 250 Z"fill="#ddd"stroke="#ddd"></path>
<defs>
<path id="p1"d="M250 50 A200,200,0,0,1,423.2050807568877,149.99999999999997 Z"fill="#ddd"stroke="#ddd"></path>
</defs>
<text style="font-size: 24px;"x="0"text-anchor="center">
<textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p1">1test text</textPath>
</text>
<path d="M250 250 L466.50635094610965 124.99999999999997 A250,250,0,0,1,466.5063509461097,374.99999999999994 L250 250 Z"fill="#fff"stroke="#fff"></path>
<defs>
<path id="p2"d="M423.2050807568877 149.99999999999997 A200,200,0,0,1,423.20508075688775,349.99999999999994 Z"fill="#fff"stroke="#fff"></path>
</defs>
<text style="font-size: 24px;"x="0"text-anchor="center">
<textPath xmlns:xlink="http://www.w3.org/1999/xlink"xlink:href="#p2">2test text</textPath>
</text>
<path d="M250 250 L466.5063509461097 374.99999999999994 A250,250,0,0,1,250.00000000000003,500 L250 250 …16
推荐指数
推荐指数
2
解决办法
解决办法
6650
查看次数
查看次数
我如何将多路径 svg 转换为一个路径
我的 .png 图像很少。使用 adobe illustrator 我已将它们转换为黑白颜色模式的 .svg。在生成的 svg 文件中有多个路径标签。
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path style="fill:#FFFFFF;" d="M514,514c-170.7,0-341.3,0-512,0C2,343.4,2,172.7,2,2c170.7,0,341.3,0,512,0
C514,172.7,514,343.4,514,514z M257.6,6.4C119.5,6.2,7,117.9,6.5,255.8C6,394.1,118.3,507.2,256.5,507.5
c137.8,0.3,250.6-111.9,251.1-249.6C508.1,119.4,395.9,6.6,257.6,6.4z"/>
<path d="M257.6,6.4c138.3,0.2,250.5,113.1,250,251.6c-0.5,137.7-113.3,249.9-251.1,249.6C118.3,507.2,6,394.1,6.5,255.8
C7,117.9,119.5,6.2,257.6,6.4z M256.6,358.8c0.3,4.2,0.6,7.6,0.7,10.9c0.2,27.6,0.3,55.3,0.4,82.9c0,15.1-4.2,18.9-19.1,17.6
C127,461,41.4,366.1,42.9,253.3C44.3,141.9,133.4,49.1,244.6,43c102.4-5.6,194.8,61.7,219.9,160.4
C490,303.1,441.8,406,348.6,450.5c-3.7,1.8-7.8,2.9-11,5.4c-1.9,1.5-3.8,5.5-3.1,7.4c0.7,1.8,5,3.7,7.2,3.2
c4.6-0.9,9-3.2,13.3-5.2C454,414,504.5,302,474.9,195.8C445.3,90,344.1,21.3,234.1,32.3C103.7,45.4,11.8,166.1,34.1,295.2
C51.8,397.9,133.3,472.6,238.6,483c4.9,0.5,10,3.2,14.2,6c7.2,4.9,14.2,5.7,20.5-0.2c6.4-6,5.9-12.9,1.2-20.3
c-2.5-4-4.7-9.1-4.8-13.7c-0.7-29.3-0.6-58.7-1.3-88c-0.2-8.2,2.4-12.5,10-16.3c25.9-13,39.5-40.1,35.9-68.8
c-3.6-28-23.8-50.9-51.4-57.2c-6.9-1.6-14.2-1.8-21.3-2.5c-29.7-3.1-50.5-27.4-49.2-57.7c1.1-27.7,24.6-50.7,52.7-51.4
c29.4-0.8,53.7,20.6,56.4,49.7c0.3,3.6,0.7,7.3,1.1,12c13.2,0,25.4-0.2,37.7,0c41.2,0.7,77.3,31.4,83.3,71
c6.5,42.3-17,81.8-56.6,95.6c-6.2,2.2-11.4,3.7-17.4-2.5c-6.8-7-18.6-4.6-24.4,3.1c-5.7,7.5-4.6,17.8,2.5,24
c7.1,6.1,17.1,5.2,24.3-0.9c4.9-4.1,10.5-8.1,16.5-10c40.8-13.1,69.4-51.2,69.7-93.9c0.3-42.2-27.1-81.6-67.6-94
c-13.7-4.2-28.8-4.7-43.4-5.2c-9-0.3-12.6-2.4-14.9-11.7c-9.4-37.2-47.8-58.3-84.7-47.5c-36,10.6-56.6,49.1-45.4,85.3
c8.9,29,32.5,45.8,67.7,48c23.5,1.5,42.5,16.3,49.3,38.3c6.8,21.9-0.6,45.7-18.8,59.6c-3,2.3-6.6,4-11.3,6.8
c-0.3-5.7-0.6-9.4-0.8-13c-1.7-27.1-21.1-50.3-47.4-56.2c-7-1.5-14.3-1.4-21.3-2.6c-21.4-3.4-38.3-13.7-49.2-32.9
c-3.2-5.7-3.7-10.4,1.4-16.5c3.4-4,4.5-12.6,2.5-17.5c-1.7-4.3-9.3-9-14-8.8c-5.3,0.2-10.6,5.4-15.3,9.2c-3.7,3-6,8.1-10,10.5
c-27.5,16.8-43.1,48.1-38.5,78c6.4,40.8,37.8,68,79.4,68.2C189.1,359,222.2,358.8,256.6,358.8z"/>
<path style="fill:#FFFFFF;" d="M256.6,358.8c-34.4,0-67.5,0.1-100.6,0c-41.5-0.2-73-27.4-79.4-68.2c-4.7-29.9,11-61.3,38.5-78
c4-2.4,6.2-7.5,10-10.5c4.7-3.8,10.1-9,15.3-9.2c4.8-0.2,12.3,4.5,14,8.8c2,4.9,0.8,13.5-2.5,17.5c-5.1,6.1-4.7,10.7-1.4,16.5
c10.8,19.2,27.8,29.5,49.2,32.9c7.1,1.1,14.4,1,21.3,2.6c26.3,5.9,45.7,29.1,47.4,56.2c0.2,3.7,0.4,7.3,0.8,13
c4.7-2.8,8.2-4.4,11.3-6.8c18.2-13.9,25.6-37.7,18.8-59.6c-6.8-22-25.8-36.8-49.3-38.3c-35.2-2.3-58.8-19.1-67.7-48
c-11.1-36.2,9.4-74.7,45.4-85.3c36.9-10.8,75.3,10.3,84.7,47.5c2.3,9.2,6,11.4,14.9,11.7c14.5,0.5,29.6,1,43.4,5.2
c40.5,12.5,67.9,51.8,67.6,94c-0.3,42.7-28.9,80.8-69.7,93.9c-6,1.9-11.7,5.9-16.5,10c-7.2,6.1-17.2,7-24.3,0.9
c-7.1-6.2-8.2-16.5-2.5-24c5.8-7.6,17.6-10.1,24.4-3.1c6,6.2,11.2,4.6,17.4,2.5c39.6-13.8,63.1-53.3,56.6-95.6
c-6-39.6-42.1-70.4-83.3-71c-12.2-0.2-24.5,0-37.7,0c-0.4-4.7-0.8-8.4-1.1-12c-2.7-29.1-27-50.5-56.4-49.7 …12
推荐指数
推荐指数
2
解决办法
解决办法
9904
查看次数
查看次数
按"停止"按钮时如何停止动画并冻结图像
我创建了一个工作行星齿轮的布局.
当您单击Stop按钮时,齿轮旋转的动画应该停止并且图像"冻结".
但实际上图像会恢复到原始状态.这可以在齿轮上的黄色标记上看到.
以下是我目前制作的代码:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink='http://www.w3.org/1999/xlink' width="400" height="400" viewBox="0 0 400 400" >
<title>animation planetary mechanism</title>
<defs>
<marker id="MarkerArrow" viewBox="0 0 20 20" refX="2" refY="5" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
<rect width="14" height="10" rx="2" fill="#22211D" />
</marker>
<line id="line1" x1="150" y1="100" x2="60" y2="100" style=" fill:none;
marker-end: url(#MarkerArrow);
marker-start: url(#MarkerArrow);
stroke:#22211D; stroke-width:6; ">
</line>
<marker id="MarkerArrow-s" viewBox="0 0 20 20" refX="3" refY="1.7" markerUnits="userSpaceOnUse" orient="auto" markerWidth="20" markerHeight="20">
<rect width="7" height="3.5" rx="2" fill="#22211D" />
</marker>
<line id="line-s" x1="175" y1="100" x2="202" …11
推荐指数
推荐指数
2
解决办法
解决办法
509
查看次数
查看次数
SVG：如何圆角和矩形角？
是否可以在 SVG 中对矩形进行圆化处理，同时确保笔划遵循角的圆度？下面的代码不起作用。
无中风：
stroke-width="0px"
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="0px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>有中风：
stroke-width="10px"
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" stroke="red" stroke-width="10px" rx="10px" ry="10px" stroke-linejoin="round" />
</svg>笔画似乎遵循原来的尖角而不是圆角。
9
推荐指数
推荐指数
2
解决办法
解决办法
1万
查看次数
查看次数
如何更改 SVG 的字体大小？
我在我的网站上使用 svg 图标。这是我从 Adobe Illustrator 获得的代码：
<svg id="Livello_1" data-name="Livello 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448.05 436.7"><path d="M190.5,66.9l22.2-22.2a23.9,23.9,0,0,1,33.9,0L441,239a23.9,23.9,0,0,1,0,33.9L246.6,467.3a23.9,23.9,0,0,1-33.9,0l-22.2-22.2a24,24,0,0,1,.4-34.3L311.4,296H24A23.94,23.94,0,0,1,0,272V240a23.94,23.94,0,0,1,24-24H311.4L190.9,101.2A23.85,23.85,0,0,1,190.5,66.9Z" transform="translate(0 -37.65)"/></svg>我已经能够改变它的颜色（在我的 css 中fill:#33453a;），但不能改变它的大小（我尝试使用 和font-size，width但它们都不起作用）。我尝试这样做的原因是我需要一个可以在:hover状态中更改颜色和大小的图标。
9
推荐指数
推荐指数
2
解决办法
解决办法
3万
查看次数
查看次数
如何为 SVG <animateMotion> 添加缓出效果
我正在 SMIL 的帮助下为 SVG 设置动画。除了我想向 animatemotion 标签添加“缓出”效果之外，所有在 chrome 中都按预期工作。现在平面以线性方式沿着路径移动。我想要的是动画在最后有一个缓慢的停止，就像 CSS3 缓出效果一样。
这是SVG代码。
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px"
y="0px"
viewBox="0 0 500 700">
<style type="text/css">
.st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<animateMotion
id="1"
xlink:href="#plane"
dur="2s"
path="M50,601c10.4-18.7,22.7-44.6,32-77c11.1-38.8,12.7-69,14-97c2.4-51.8-4.1-75.4-8-87c-6.4-19.3-12.4-36.4-29-43
c-15.1-6-36.6-2.4-49,13c-7.9,9.8-12.9,25.1-8,38c12.4,32.5,79.1,28.2,82,28c31.9-2.4,55.4-19.1,82-37c17.2-11.6,30.3-22.9,39-31"
fill="freeze"
/>
<g>
<path d="M113.2,586.8c-2.3-1.3-4.8-0.5-6.5,1.9c-0.9,1.4-2,2.7-2.8,4.1c-0.1,0.2-0.2,0.3-0.3,0.4c-0.2,0.5-0.5,1-0.8,1.4
c3.9,0,7.8,0,11.7,0c0.1-0.2,0.3-0.4,0.4-0.6c0,0,0.1,0,0.1,0c0.1-0.3,0.2-0.6,0.3-0.8C116.3,590.6,115.5,588.1,113.2,586.8z"/>
<g id="plane" transform="scale(0.5) translate(-263.9, -167.6)">
<g>
<animateTransform attributeName="transform"
attributeType="XML"
type="rotate"
from="0 343.9 167.6"
to="-360 343.9 167.6"
dur="2s"
calcMode="spline"
keySplines="0.6 0.3 0.4 0.335"
keyTimes="0;1"
/>
<path d="M263.9,167.6c7.6-1,14.9-2,22.3-2.8c2.3-0.2,3.6-1.2,4.8-3.1c2.6-4.3,5.5-8.4,8.2-12.6c1.8-2.8,4.5-4,6.8-3.2 …7
推荐指数
推荐指数
1
解决办法
解决办法
1384
查看次数
查看次数
SVG 曲线上的动画选取框
我有一个环绕 SVG 圆圈的文本，该圆圈根据窗口大小进行缩放 - 感谢用户 enxaneta /sf/answers/3922537181/。我想为文本设置动画，使其像选取框一样围绕中心旋转。为此，我的代码目前如下所示：
function Init(){
let wrap = document.getElementById('wrap');
let thePath = document.getElementById('thePath');
let ellipse = document.getElementById('ellipse');
let w = wrap.clientWidth;
let h = wrap.clientHeight;
ellipse.setAttributeNS(null,"viewBox",`0 0 ${w} ${h}`);
let d = `M${w/10},${h/2}A${4*w/10},${4*h/10} 0 0 0 ${9*w/10} ${5*h/10} A${4*w/10},${4*h/10} 0 0 0 ${w/10} ${5*h/10}`
thePath.setAttributeNS(null,"d", d)
}
window.setTimeout(function() {
Init();
window.addEventListener('resize', Init, false);
}, 15);
let so = 0
function Marquee(){
let tp = document.getElementById('tp');
requestAnimationFrame(Marquee)
tp.setAttributeNS(null,"startOffset",so+"%");
if(so >= 50){so = 0;}
so+= .05
} …6
推荐指数
推荐指数
1
解决办法
解决办法
841
查看次数
查看次数
WINTER BASH 2020 赛季图像动画
WINTER BASH 2020赛季即将结束，我认为找出 CSS 和其他标记来生成此处显示的优秀徽标会很有启发性：
在下图中，数字表示动画所需的对象
动画脚本：
帽子生成器。上下移动不均匀
问号应该漂浮在空间中，同时大小发生变化。公开获取“秘密帽子”条件的信息收集象征着什么。
气球应均匀摆动。
蓝色的小帽子应该沿着 WINTER 这个词的路径移动
月亮摆动。应该在完成场景的第 4 点后开始
蓝色大帽子向前移动寻找新帽子。在第 6 步开始后一段时间，帽子应该开始从上方落下。
星星的动画，应该在找到所有帽子后开始。
我设法实现了场景的第一点。
单击画布后开始帽子动画
.container {
width:100vw;
height:100vh;
}
.s0{
fill:none;
stroke:#000;
}
#hat {
stroke:#000;
fill:#30BAE4;
}<div class="container" >
<svg id="svg1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2787 768"preserveAspectRatio="xMinYMin meet" style="border:1px solid;">
<image xlink:href="https://i.stack.imgur.com/Qe1A9.jpg" height="100%" width="100%"/>
<g id="hat" transform="translate(-1320,-180)" >
<path d="m1299.3 183.9 46.5-16.7 2.7 6-46.7 16.7zM1308.9 180.6l-10.2-29.1 28.5-9.9 10.4 28.8" />
<path d="m1308.9 180.6-10.2-29.1 28.5-9.9 10.4 28.8z" />
</g>
<g …6
推荐指数
推荐指数
1
解决办法
解决办法
172
查看次数
查看次数
在 HTML 中使用 SVG 创建一个等边三角形，底高为 100px
我正在尝试创建一个底部和高度为 100px 的 SVG。但不确定它是否正确。我没有得到我需要的确切输出。下面是代码示例
<svg id="triangle" viewBox="0 0 100 100">
<polygon points="50 15, 100 100, 0 100"/>
</svg>请纠正我做错的地方。我真的很感谢你的帮助。
谢谢！
5
推荐指数
推荐指数
1
解决办法
解决办法
2160
查看次数
查看次数