使svg模式内容从<pattern>框架溢出，而不是被切断
我用图标创建了一个模式。用户可以拖动滑块来旋转图案的图标。这是我的密码：
const slider = document.getElementById("slider")
const carrotIcon = document.getElementById("carrotIcon")
slider.oninput = function(){
carrotIcon.setAttribute('transform', 'rotate('+slider.value+' 25 25) translate(0 0)')
}<svg width="200px" height="150px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="carrot" viewBox="0 0 50 50">
<rect width="50" height="50" fill="none" stroke="black" stroke-width="1"/>
<path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
</symbol>
<pattern id="myPat" patternUnits="userSpaceOnUse" width="50" height="50" patternTransform="rotate(0)">
<use id="carrotIcon" xlink:href="#carrot" width="50" height="50" fill="orange" transform="rotate(0 25 25) translate(0 0)"></use>
</pattern>
<rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)"> </rect>
</svg>
<p style=font-size:15px>Rotate Icons </p>
<input id="slider" type="range" min="0" max="360" value="0" step='1' >
您可以注意到，当您旋转时，模式的内容将被<pattern>的框架所切断，因为在某些维度中，模式的内容要大于模式的框架。
我希望在旋转时，图案的内容能从图案中溢出。它们可以互相重叠。以下是预期结果的图表：
你知道如何实现它吗？
回答 1
Stack Overflow用户
发布于 2022-11-09 16:34:42
理论上，这应该通过向overflow="visible"元素中添加一个<pattern>来解决。不幸的是，由于浏览器实现冲突，您遇到了一个未解决的问题。
SVG 2规范说这个
SVG的用户代理样式表将
pattern元素的溢出属性设置为隐藏，这将导致在模式块边界创建矩形裁剪路径。除非溢出属性被覆盖，否则模式矩形外的任何图形都将被裁剪. 请注意，如果将溢出属性设置为可见，则该模式在模式边界之外的呈现行为当前未定义。未来版本的SVG可能需要显示溢出。SVG实现者被鼓励呈现溢出，因为这是作者期望的行为。
2016年的一个开放的问题解释了这一点：
可见溢出效应在SVG 1中没有明确定义，导致不可互操作的实现. 这不是一个理论问题。我从作者那里得到了抱怨和困惑，为什么在一个浏览器中他们想要的模式不能在另一个浏览器中工作。具体来说，当图案的重复元素不适合于整齐的矩形瓷砖时，问题就出现了。 下面是一个最近的截图例子。顶部图像来自火狐，显示裁剪到模式砖，尽管溢出值，底部的图像是来自Chrome. 我目前对作者的最佳建议是使用
<use>元素创建足够多的重复，以完全填充矩形瓷砖。但这远非理想。这不仅是混乱和重复的代码，它还打开了边缘效果的可能性在渲染(揭示边缘的模式砖)。
从那以后，什么也没有发生：
boggydigital在2018年6月11日的SVG2.1工作草案中增加了这一点。
因此，您必须在您的<use>中输入多个<pattern>元素。每个人都需要围绕自己的旋转中心旋转。最好的解决方案是旋转<symbol>的内容，然后需要自己的overflow="visible"才能工作。
const slider = document.getElementById("slider")
const carrotIcon = document.getElementById("carrotIcon")
slider.oninput = function(){
carrotIcon.setAttribute('transform', 'rotate('+slider.value+' 25 25) translate(0 0)')
}<svg width="200px" height="150px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="carrot" viewBox="0 0 50 50" overflow="visible">
<g id="carrotIcon">
<rect width="50" height="50" fill="none" stroke="black" stroke-width="1"/>
<path d="M30 13c-1-3-5-4-7-2h-1l1-11h-3l-1 9-4-7-3 1 5 8-8-4-1 2 9 5h-1c-2 2-3 5-2 7l2 2 5-3 1 2-5 3 8 9 5-3 2 2-5 3 12 14 3-2-8-25-5 3-1-2 5-3-3-8z" />
</g>
</symbol>
<pattern id="myPat" patternUnits="userSpaceOnUse" width="50" height="50" style="overflow:visible">
<use xlink:href="#carrot" width="50" height="50" fill="orange"></use>
<use xlink:href="#carrot" x="-50" width="50" height="50" fill="orange"></use>
<use xlink:href="#carrot" x="50" width="50" height="50" fill="orange"></use>
<use xlink:href="#carrot" y="-50" width="50" height="50" fill="orange"></use>
<use xlink:href="#carrot" y="50" width="50" height="50" fill="orange"></use>
</pattern>
<rect x="0px" y="0px" width="300px" height="200px" fill="url(#myPat)" overflow="visible"> </rect>
</svg>
<p style=font-size:15px>Rotate Icons </p>
<input id="slider" type="range" min="0" max="360" value="0" step='1' >
https://stackoverflow.com/questions/74368854
复制相似问题
腾讯云开发者
