SVG路径大于SVG容器
所以我有一个超级奇怪的案例（至少对我来说是超级奇怪的）。
SVG路径不包含在SVG元素中。我已经尝试了很多事情来让这个工作，但没有一个是有效的，现在怀疑我错过了什么。
我有一把JS小提琴:https://jsfidle.net/67w3hays/
正如您所看到的，youtube图标比容器大，因此无法伸长到容器中
代码：
<a href="" class="social-link" target="_blank" rel="noopener noreferrer">
<svg width="18" height="18" viewBox="0 0 18 18" fill="#C9DCFA" xmlns="http://www.w3.org/2000/svg">
<path class="youtubeSVG" d="M35.705 0S13.354 0 7.765 1.47c-3 .824-5.47 3.295-6.294 6.354C0 13.412 0 25 0 25s0 11.646 1.47 17.176a8.95 8.95 0 006.296 6.295C13.413 50 35.706 50 35.706 50s22.352 0 27.94-1.47a8.95 8.95 0 006.295-6.296c1.471-5.588 1.471-17.175 1.471-17.175s.059-11.647-1.47-17.235a8.95 8.95 0 00-6.296-6.295C58.058 0 35.706 0 35.706 0zm-7.117 14.295L47.176 25 28.588 35.705v-21.41z"/>
</svg>
</a>
答案的预期结果：
我希望这个SVG路径适合于18宽和18高的容器（或者接近18px高度的高宽比）。
共有1个答案
https://jsfidle.net/hdql3a4z/
去掉svg标记上的width和height，只保留视口：
<svg viewBox="0 0 71.41 50" fill="#C9DCFA" xmlns="http://www.w3.org/2000/svg">
并在CSS上设置缩放：
a > svg {
width: 18px;
height: auto;
}
-
SVG 路径 - <path> <path> 元素用于定义一个路径。 下面的命令可用于路径数据： M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier c
-
SVG中的路径概念可以是一个形状的外框，也可以是用来裁剪的线条，这个线条可以被描边，封闭时还可以被填充。 路径和折线或多边形不同之处在于，路径可以是直线也可以曲线，因此使用路径可以构造更为复杂的几何图形。 我们可以把路径看成是手工绘图的笔迹，可以用点的集合和绘制方式（如线段或圆弧）来描述。 path 标签 path 标签用来创建一条路径，路径元素的基本属性是路径数据，用 d='path data'
-
我想知道如何高亮（改变颜色）一个SVG路径的自重叠区域（甚至折线）。实际上，如果我更改路径的不透明度和笔画属性，则自翻转区域的颜色不会改变。 例如，具有以下路径，重叠区域不是红色-暗色。 以下是我到目前为止发现的，但对解决问题没有帮助。http://www.svgopen.org/2005/papers/abstractsvgopen/index.html#s2。 谢谢
-
我有一个箭头头的路径，我想做一个颜色过渡动画，从左到右。 我已经为线和箭头做了这件事，但它似乎不是同步的。我希望线和箭头都过渡颜色无缝。 CSS
-
我今天刚开始玩SVG，我不知道如何在没有悬停区域重叠问题的情况下使用非矩形形状进行悬停，就像你在我的小提琴中看到的那样。
-
问题内容： 我正在尝试将SVG路径转换为Node中的点列表。我正在使用elementtree来解析SVG文件。 d是路径的定义，getPos只是将“ x，y”变成带有x和ay的对象，doLine只是将坐标添加到列表中。 目前，这似乎无法正常工作。 我知道我的路径永远不会有曲线，因此我不必为此担心。 我不确定SVG标准，所以如果有人可以帮助我，将非常感谢。 问题答案： SVG包含自己的路径段 解析器