Vue3 - 如何在 CSS url() 中使用自定义 ID？答案

【问题标题】：Vue3 - How to use a custom ID in CSS url()?Vue3 - 如何在 CSS url() 中使用自定义 ID？
【发布时间】：2021-11-03 20:15:26
【问题描述】：

我有一个 vue 组件，我在其中定义了一个用于剪辑 :id="'clipping_'+ UID" 的 id。但是当我尝试在 CSS clip-path: url(v-bind("'#clipping_' + UID"); 中使用它时，它被视为 var()，而 url() 不允许使用它。

声明或访问此 ID 的正确方法是什么？谢谢。

<template>
   <div>
      <svg class="svg">
         <clipPath
            :id="'clipping_'+ UID"
            clipPathUnits="userSpaceOnUse">
            <circle
               cx= "20"
               cy= "20"
               r="20"/>
         </clipPath>
      </svg>
      <div class="foreground"/>
   </div>
</template>

<script>
   export default
   {
      name: 'myComponent',
      data: function ()
      {
         return {
            UID: "asdf",
         };
      }
   };
</script>

<style scoped>
   .foreground {
      width: 100%;
      height: 40px;
      background: hsl(356, 0%, 53%);

      clip-path: url(v-bind("'#clipping_' + UID");
      -webkit-clip-path: url(v-bind("'#clipping_' + UID");
   }

   .svg {
      width: 100%;
      height: 40px;
   }
</style>

【问题讨论】：

标签： css url vuejs3 clip-path

【解决方案1】：

我刚刚发现，如果url()里面不能有var()，反之亦然。

clip-path: v-bind("'url(#clipping_' + UID + ')'");

【讨论】：