CSS变换不适用于页面加载和动态更新<g>内部svg

我想将文本放置在SVG元素的左下角，并设法实现使用组和变换，但注意到它不会更新如果我垂直调整我的窗口大小，也不会适用于页面加载，但如果我通过开发人员控制台添加转换属性。他们完美地工作，直到我调整窗口。CSS变换不适用于页面加载和动态更新<g>内部svg

它是某种错误还是我做错了什么？有没有另一种方法来定位SVG元素相对于左下方的文本，并保持它响应窗口调整大小？顺便说一下，我正在使用Chrome 61。

这里有一个链接的jsfiddle太： https://jsfiddle.net/eow1c4o4/

*,*:before,*:after { 
 
    box-sizing: border-box; 
 
} 
 
body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 300vh 
 
} 
 
tspan { 
 
    font-weight: 900; 
 
    font-size: 50px; 
 
    dominant-baseline: hanging; 
 
}

<svg width="100%" height="100vh"> 
 
    <defs> 
 
    <mask id="mask" maskUnits="userSpaceOnUse"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <g style="transform: translate(0, 100%);"> 
 
     <rect x="0" y="0" width="100%" height="100%" fill="white"></rect> 
 
     <g style="transform: translate(50px, -100%);"> 
 
      <text x="0" y="0" text-anchor="start" font-family="Roboto"> 
 
      <tspan x="0" dy="0">SOME</tspan> 
 
      <tspan x="0" dy="0.81em">ABSOLUTELY</tspan> 
 
      <tspan x="0" dy="0.81em">RANDOM TEXT</tspan> 
 
      </text> 
 
     </g> 
 
     </g> 
 
    </mask> 
 
    </defs> 
 

 
    <rect width="100%" height="100%" fill="#dedede" fill-rule="evenodd" mask="url(#mask)"></rect> 
 
</svg>

来源

2017-10-04 Vlad

变换在SVGs不允许百分比。但几何属性确实允许它们。所以最简单的方法是使用<use>元素。

*,*:before,*:after { 
 
    box-sizing: border-box; 
 
} 
 
body, html { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 300vh 
 
} 
 
tspan { 
 
    font-weight: 900; 
 
    font-size: 50px; 
 
}

<svg width="100%" height="100vh"> 
 
    <defs> 
 
    <text id="mytext" x="0" y="-80" text-anchor="start" font-family="Roboto"> 
 
     <tspan x="0" dy="0">SOME</tspan> 
 
     <tspan x="0" dy="0.81em">ABSOLUTELY</tspan> 
 
     <tspan x="0" dy="0.81em">RANDOM TEXT</tspan> 
 
    </text> 
 
    <mask id="mask" maskUnits="userSpaceOnUse"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <use xlink:href="#mytext" x="5%" y="95%" fill="black"/> 
 
    </mask> 
 
    </defs> 
 

 
    <rect width="100%" height="100%" fill="#dedede" fill-rule="evenodd" mask="url(#mask)"></rect> 
 
</svg>

我们得到的文本坐在底部的方法，是先定位它只是关闭屏幕的顶部。然后我们使用<use>元素重新定位它在y="95%"。这只是一个小于100％，所以它结束了高于底部。

https://jsfiddle.net/eow1c4o4/1/

来源

2017-10-05 07:14:40

CSS变换不适用于页面加载和动态更新<g>内部svg

回答

相关问题